Simple configuration of the Webpack

I just start also won't write Webpack configuration, just start on the Internet search some, see also just understand, so prepare oneself write down, have made commemorative and contribute to like I will not configure "children's shoes"!

1. Create a Webpack configuration file

Create a Webpack.config JS file under the project file.

　　

2, the configuration file was created, we began to formally configure the Webpack.

1, we want to install Nodejs, should be webpack based on Nodejs,nodejs can click here to download;

2, after installing Nodejs, we open the Command window, find your project file, in the directory where the project file Webpack.config.js file is located

Enter NPM install webpack--save-dev (download Webpack dependency plug-in to local project), after the download is complete, in your project file (and Webpack.config.js file sibling directory) will be automatically created Node_ Modules folder, which is loaded with all the necessary for this project to use the dependency plug-in (of course, now only a webpack plug-in), we first use what to download first what plug-in, if necessary to download later.

　Description: For the project file, open the name window, enter the install Webpack plugin

　　

　　Description: Is when download Webpack is complete

　　

　　Description: Node_modules created automatically for the project file

3, after completing the above steps, we started the real configuration webpack.

　　　　　　

/* *@ content: Webpack configuration * @web front-end small white *@ time: 2016/7/4 * */var webpack = require (' Webpack '); moudle.exports = {//config portal file, entry file can be in the shape of the object    Configuration, can also be configured as an array, suffix name can omit/* * Object Form Configuration Portal * *///entry:{//Index: './index '//'./index.js '//},         /* * Array Configuration Portal * */ENTRY: ['./index '//' index.js '],//Output file Export output: {/* Output path, in this we want to manually create a folder, the name can be named, the output file path is relative to the path of this file * * * * path: './dist ',//output path filename: ' [name].bundle.js '//output file name, the file can be defined by itself, [name] means the file corresponding to the portal file, can not [name],},/* Title: Loader (Loaders) * Role: Need to download different Loader, such as css,js,png and so on * */loaders: [{test:/\.js?$/, loaders: [' Babel-loader ']}//babel loader can convert JSX syntax to JS syntax, also        You can convert the ES6 grammar standard to the ES5 syntax standard/* * You can configure the other loader here, the same way * */],/* * * * */Resolve: {         /* alias configuration, after configuration, you can use require (' D3 ') directly in other JS files, import the file as a module into the project you need, not the configuration can also be imported into the project as a module, but you have to repeat the path.           * */alias: { ' D3 ': ' D3/d3.min.js '}} 

4, the above is the configuration Webpack code, after the configuration is complete, in your webpack.config.js file in the directory of the Open command Window (can learn from the first step), input webpack/webpack-w

(Compile, do not change the code once, to re-enter Webpack to compile/auto-compile, change the code and save, you can automatically compile), I hope to like the small white to help.

Conclusion: Just so simple webpack configuration has been completed, you can write your other code with peace of mind

Simple configuration of the Webpack