http://blog.csdn.net/mafan121/article/details/71211922
1. Create an empty project using Webstrom
2. Create folders and files under the project
A. Create a CSS folder to hold the Index.css file with the following file contents:
[CSS]View PlainCopyprint?
- p{
- font-size: 24px;
- padding:0 100px;
- color:blue;
- }
- P:nth-of-type (2) {
- font-size: 30px;
- text-align: Center;
- color:black;
- font-family:"the Young Circle";
- }
- P:nth-of-type (3) {
- color: red;
- font-weight:bold;
- text-align: Right ;
- }
B. Create the index folder and store the index.html file with the following file contents:
[JavaScript]View PlainCopyprint?
- <! DOCTYPE html>
- "en" >
-
- <meta charset="UTF-8" >
- <title>myFirstDemo</title>
-
- <body>
- <div id="app" ></div>
- <script src="Bundle.js" ></script>
- </body>
-
C. Create the Data folder to hold the Index.json file with the following file contents:
[JavaScript]View PlainCopyprint?
- {
- " name":"Hello Webpack",
- "Content":"This is my first demo",
- "Start":"Ready go!"
- }
D. Create Jsproject folder to hold Createdom.js and entry.js files.
Entry.js
[JavaScript]View PlainCopyprint?
- Require ('./... /css/index.css ');
- var createdom = require ('./createdom.js ');
- document.getElementById (' app '). AppendChild (CreateDOM ());
Createdom.js
[JavaScript]View PlainCopyprint?
- var message=require ('./... /data/index.json ');
- Module.exports = function () {
- var greet=document.createelement (' div ');
- Greet.innerhtml="<p>" +message.name+"</p>" +"<p>" +message.content+"</p>" +"<p>" +message.start+"</p>";
- return greet;
- };
3. Command operation
Execute the following command in the Webstorm terminal window:
A. Generating a dependent file Package.json (default is generated at the root directory)
CNPM Init
B. Install dependencies in turn (the Node_modules folder appears under the installation project root, which contains download dependencies)
(1) cnpm Intsall webpack-g
(2) cnpm install--save-dev Webpack
(3) cnpm install--save-dev Css-loader
(4) cnpm install--save-dev Style-loader
(5) cnpm install--save-dev Json-loader
(6) cnpm install--save-dev Webpack-dev-server
4. Configuring the Webpack.config.js File
Create a webpack.config.js file under the project root path with the following file contents:
[JavaScript]View PlainCopy print?
- var webpack = require (' webpack ');
- Module.exports = {
- //2, Import and export document configuration
- entry:__dirname+'/jsproject/entry.js ',//The specified portal file, "__dirname" is a global variable in node. js that points to the directory where the current execution script resides
- Output: {//outputs
- Path: __dirname+'/index ',//output path
- FileName: ' bundle.js '//output file name
- },
- Module: {//Add loader description in config file to indicate what loader processing is required for each type of file
- Loaders: [
- {//json loader
- Test:/\.json$/,
- Loader: "Json-loader"//note-loader can not be omitted, online said to be omitted, the test compiled will error
- },
- {//5, compiling ES6 configuration
- test:/\.js$/,
- Exclude:/node_modules/,
- Loader:' babel-loader ',//In the Webpack module section of the loaders configuration can be
- query:{
- presets:[' es2015 ',' react ']
- }
- },
- {//3, Css-loader
- test:/\.css$/,
- Loader:' style-loader!css-loader '//Add a handle to the style sheet
- }
- ]
- },
- ///4, Server dependent package configuration
- Devserver: {//NOTE: There are many colors properties on the Web, but the actual webpack2.x already does not support this property.
- Contentbase: "./index",//directory where the local server loads the page
- Historyapifallback: True,//Do not jump
- Inline: true//real-time refresh
- //hot:true,//do not write this property, or the browser cannot update automatically
- //publicpath: "/asses/",//After setting the property, Webpack-dev-server will be relative to the path
- },
- Plugins:[]//Plugins
- }
The file directory at this time is:
5. Start the service
In the terminal, enter:
Webpack
When execution is complete, enter:
Webpack-dev-server
Then enter it in the browser: http://localhost:8080/
You can see the effect at this point and update the code. The browser is also refreshed in real time.
Webstorm+webpack Creating a Project
