introduction
After a long front-end development, the emergence of a lot of practices to handle complex workflows make it easier to develop, which can make the modular complex procedures refined into various smaller files, but does not force you to use webpack some modular approach, but to give you painless access through the project is compatible with all modular approach, webpack This paper describes in detail the process of configuring and installing packaged.
Webpack brief
Essentially, WebPACK is a modern JavaScript applications static packer module (Module Bundler) . When webpack processing applications, it recursively construct a dependency graph (dependency Graph) , wherein each module comprises application desired, all of these modules are then packaged into one or more of the bundle .
Which includes four core concepts
- Entrance (entry): webpack indicates which modules should be used, which is constructed as an internal dependency graph begins. After the entrance to the starting point, webpack will find out which modules and libraries are the starting point of entry (direct and indirect) dependent
- Output (output): Tell webpack where the output it creates bundles , and how to name the files, the default value
./dist - loader: Let webpack able to deal with those non-JavaScript files (webpack itself only understand JavaScript)
- Plugin (plugins): plug-in can be used to perform a wider range of tasks. Range of plug-ins include, from packaging optimization and compression, all the way to redefine the environment variable. Plug-in interface is extremely powerful, can be used to handle a variety of tasks.
FIG via an official website, can explain the powerful webpack, as follows:
Packaging step
Next, detailed configuration and detailed procedures webpack installation packaged
Installation node.js
Can refer to the blog post Node.js installation detailed steps tutorial (Windows) , the writing is not repeated here.
Global installed webpack
Run the CMD, the install command as follows, where, is a global -g installed and removed and installed WebPACK webpack-cli
npm install webpack webpack-cli –g
Creating a local project folder
Creating a local project folder, such as "D: \ TestWebpack", the CMD command window, respectively, enter the following command to change to that directory
D: // switch to the D drive cd D: \ TestWebpack // change to the project directory
Local installation webpack
Enter the following command, webpack installed in the project directory, wherein, - save-dev installed locally
npm install webpack webpack-cli --save-dev
View webpack version
Enter the following command, if the version number appears, the installation was successful.
webpack -v
Create a file package.json
Enter the following command to automatically generate a file in the project directory package.json
npm init -y
Configuration Package Contents
In the project directory, create config folder, for storing the profile; the src folder, for storing the source code; OUT folder, for storing the package generated document, particularly as shown below.
Add webpack.config.js file
Add webpack.config.js config file in the folder and add the following code:
the require path = const ( 'path'); // call path in node.js module.exports = { entry: { index: './src/js/index.js' // need to package file }, Output: { filename: '[name] .js', // what file name is input, generated file name is what path: path.resolve (__ dirname, '.. / OUT') // specified file directory generated }, the mODE: "development" // development model, and so no js file compression, file compression is generated by default }
Run webpack
In the cmd command window, type the following command, after a successful run in the directory out of the package will be generated after index.js
webpack --config config/webpack.config.js
Placed package.json
Each input commands webpack --config config / webpack.config.js, long, and very inconvenient, in this case we can configure package.json file, as follows:
{ "name": "TestWebpack", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "webpack --config config/webpack.config.js" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "clean-webpack-plugin": "^3.0.0", "webpack": "^4.39.3", "webpack-cli": "^3.3.8" } }
Once configured, we enter the following commands can be directly packaged.
npm run start
JS deal with the problem of cache
JS cache hash value by solving problems (in the absence of JS modify the content to be packaged, not repackage a JS file), modify webpack.config.js file, the specific code as follows:
const path=require('path');
module.exports={
entry:{
index:'./src/js/index.js'
},
output:{
filename:'[name].[chunkhash:8].js',//增加8位的哈希值
path:path.resolve(__dirname,'../out')
},
mode:"development",
}
Installation webpack plug clean-webpack-plugin
Delete old files before the output destination by clean-webpack-plugin plugin.
Installation Commands
npm install --save-dev clean-webpack-plugin
Use a
const path=require('path');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports={
entry:{
index:'./src/js/index.js'
},
output:{
filename:'[name].[chunkhash:8].js',
path:path.resolve(__dirname,'../out')
},
mode:"development",
plugins:[
new CleanWebpackPlugin()
]
}
Usage of Two
const path=require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin').CleanWebpackPlugin ;
module.exports={
entry:{
index:'./src/js/index.js'
},
output:{
filename:'[name].[chunkhash:8].js',
path:path.resolve(__dirname,'../out')
},
mode:"development",
plugins:[
new CleanWebpackPlugin()
]
}
After configuration, we run npm run start again, this time out the directory, only a new generation of js files, as shown below.
to sum up
So far, we have completed the installation from webpack, configuration, packaging and a series of steps. More detailed steps, through all after I tested, if present in the installation or use questions, please leave a message exchanges, if this article help you, want to focus on the support of.