Webpack Automation to build your project

1. Read thousands of books and walk the road.

2. The book Mountain has the No Royal road as the path, the work is the endless hardship makes the boat.

Technical section:

Believe that a lot of the first contact with the front-end partners, some automation tools will feel no way to start. Now the development of the front-end momentum, and the background is bound to form an opposite, Dudangyimian.

This article I write some things about webpack, learn not deep, follow-up in-depth study and then update the blog.

What is Webpack? Why use Webpack? Actually do everything is the same, the appearance of a thing, it will have its meaning.

Webpack function A lot, the original contact Webpack because in the process of development encountered a problem, in the version of the iteration there will be a cache problem, is when you update

Code, because of the reason for the cache, your new code is not available in a timely manner, and features will not be presented to users in a timely manner. It's not that bad at first, but to the back iteration.

A lot of versions, this problem has been in existence, there is a study of Webpack on the back.

This I just about the whole process, the process is not wrong, I believe you will succeed in the Webpack environment to install success. (There are many tutorials online)

1. Install node. js. The first step is definitely to install node. js This is the webpack necessary development environment, go directly to the node. JS official website To download the latest version of the installation.

After installation, you can check the version of node. JS installed in the terminal Input command node-v.

2. Install NPM. This also has to be installed. What is NPM? Suggest you want to understand, here recommend you a pure technical website, rookie tutorial. Great for beginners.

Open the terminal in the main directory of your development project and install it on the terminal by entering NPM install--save-de. Are you wondering why you could just enter this command?

In fact you don't have to be surprised, because you installed node. js, these things in node. js, you just need to download them to local use. Don't be surprised.

3. The following is the installation of a lot of plug-ins, remember that these plugins are also downloaded in node. js, we just need to enter the command to download it.

Plugin One: npm install--save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

Plugin II: NPM install--save-dev style-loader css-loader

Installing WEBPACK:NPM Install--save-dev Webpack-dev-server

Run the packaged code in the current directory: NPM run qzq (running command)

Here are some of the files that are configured:

2, Package.json configuration content
{
"Name": "Daka",
"Version": "1.0.0",
"Main": "Index.js",
"Scripts": {
"Test": "Echo \" Error:no test specified\ "&& exit 1",
"BDTT": "Webpack--config webpack.bdtt.config.js",
"Daka": "Webpack--config webpack.daka.config.js",
"Dakasuccess": "Webpack--config webpack.dakaSuccess.config.js",
"Qzq": "Webpack--config webpack.qzq.config.js"
},
"Author": "Zhang",
"License": "ISC",
"Devdependencies": {
"Autoprefixer": "^7.1.3",
"Babel": "^6.23.0",
"Babel-core": "^6.26.0",
"Babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"Babel-preset-react": "^6.24.1",
"Clean-webpack-plugin": "^0.1.16",
"Css-loader": "^0.28.7",
"Extract-text-webpack-plugin": "^3.0.0",
"File-loader": "^0.11.2",
"Html-webpack-plugin": "^2.30.1",
"Install": "^0.10.1",
"jquery": "^3.2.1",
"Less": "^2.7.2",
"Less-loader": "^4.0.5",
"NPM": "^5.3.0",
"Postcss-loader": "^2.0.6",
"Style-loader": "^0.18.2",
"Url-loader": "^0.5.9",
"Webpack": "^3.5.5",
"Webpack-dev-server": "^2.7.1"
},
"description": "Wxy",
"Dependencies": {
"Webpack": "^3.5.5"
}
}
3, Webpack.qzq.co3, Webpack.qzq.co3, webpack.qzq.config.js content
A common ' webpack ' configuration file
Const WEBPACK = require (' Webpack ');
var htmlwebpackplugin = require (' Html-webpack-plugin ');
var cleanplugin = require (' Clean-webpack-plugin ');
var extracttextplugin = require ("Extract-text-webpack-plugin");
var autoprefixer = require (' autoprefixer ');

Module.exports = {
Entry: {
' Zmqzq ': __dirname + "/require/qzq/zm_qzq.js",
' Zmmine ': __dirname + "/require/qzq/zm_mine.js",

},
Output: {
Path: __dirname + "/build/qzq",
FileName: "[name].js"
},
Devtool: ' None ',
Devserver: {
Contentbase: "./",//the directory where the local server loads the page
historyapifallback:true,//not jump
Inline:true,
Hot:true
},
Module: {
Rules: [
{
Test:/(\.jsx|\.js) $/,
Use: {
Loader: "Babel-loader"
},
Exclude:/node_modules/
},
{
Test:/\.css$/,
Use:ExtractTextPlugin.extract ({
Fallback: "Style-loader",
Use: "Css-loader"
})
},
{
test:/. (PNG) | (jpg) $/,
Loader: "url-loader?limit=8192"
}
]
},
Plugins: [
New Cleanplugin ([' Build '], {
Root: '/users/huizhang/web-git/apps/newproject/build/qzq ',
Root: ' D:/web/apps/newproject/build ',
Verbose:true,
Dry:false//false means delete
/* Exclude exclude: [' Shared.js ']*/
}),//Clear Directory
New Extracttextplugin ("[Name].css"),
New Htmlwebpackplugin ({
FileName: __dirname + '/resource/zm_insurance/zm_list.html ',//This path is relative to the Output.path output JS set in the upper level of JS to use. /.. /
Chunks: [' zmqzq '],//limit this template to only introduce index and common part JS Common.js
Hash:true,//For static resources generate hash value after the introduction of the resource address plus? Hash value implementation does not modify the file name Plus version number function
Xhtml:true,//requires XHTML-compliant standards
Inject: ' Body ',
Template: __dirname + '/resource/zm_insurance/zm_list.ejs '//Templates address
}),
New Htmlwebpackplugin ({
FileName: __dirname + '/resource/zm_insurance/zm_mine.html ',//This path is relative to the Output.path output JS set in the upper level of JS to use. /.. /
Chunks: [' zmmine '],//limit this template to only introduce index and common part JS Common.js
Hash:true,//For static resources generate hash value after the introduction of the resource address plus? Hash value implementation does not modify the file name Plus version number function
Xhtml:true,//requires XHTML-compliant standards
Inject: ' Body ',
Template: __dirname + '/resource/zm_insurance/zm_mine.ejs '//Templates address
})
]
};

Webpack Automation to build your project