webpack dependencies module can be constructed according to a recursive dependency graph, which contains all the modules required for the application, one or more packed into the last bundle. It has four core concepts entry, output
., Loader, plugin following describes the basic use:
1. Create a folder webpacktest, the following two new folders are src, dist.
2. In the open terminal webpacktest, will perform one more package.json npm init file directory after initialization, then install Webpack package.
(1) global installation webpack (only used in the project, would not -g)
npm install -g webpack webpack-cli
(2) build the default entry in the file as a index.js src folder
Index.js the test code is written as follows:
console.log("hello world");
(3) In package.json file, write the following code
"scripts" : { "Test": "echo \" Error: NO Test specified \ "Exit. 1 &&" , "Build": "Development WebPACK --mode" // this code is written using WebPACK be packaged, and Development mode to the --mode }
There are two modes: development (after compression code is not packaged), production (post code compression packing)
(4) in the terminal now run npm run build, dist folder is generated packaged main.js file (main.js under dist is the default export file).
npm run build
These are webpack zero configuration.
3. build a webpack.config.js file (hereinafter referred to as configuration files) in the root directory is configured to webpack
(Note: Every rewrite configuration files, restarting, to take effect)
(1) first configure the entrance and exit documents
the require path = const ( 'path' ); module.exports = { entry: './src/index.js' , Output: { path: path.resolve (__ dirname, 'dist' ), filename: 'bundle.js' //bundle.js is the file name in dist folder under the package generated (before the default is main.js), can also be changed to other names } };
Now under npm run build, dist file will generate a bundle.js file (main.js file also)
(2) in the root directory, create an index.html file, to reference the generated bundle.js file (packaged test is successful), and open it in a browser, the browser console will be able to show a hello world.
But this index.js each modified files under src, need to re-run npm run build, very troublesome.
Rewrite package.json file so that you can monitor real-time changes webpack index.js files under src, automatic packaging.
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --mode production -w" //只用配置上 -w }
(3) set the hash code, solve the problem of cache
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle[hash:8].js' //设置8位hash值
}
};
Now the package to be introduced dist index.html js file generated very troublesome, because the files are in index.js src each change document automatically generated with different hash values bundle.js Thus to install the plug below.
(4) mounted html-webpack-plugin plug (introduced above bundle.js index.html file is introduced manually, the widget can be automatically incorporated)
Role: 1. This plug-in also automatically based on html templates, html file to generate a file in the dist 2. automatic introduction js file package
npm i --save-dev html-webpack-plugin
Introduced in the configuration file
the require path = const ( 'path' ); const HtmlWebpackPlugin = the require ( 'HTML-WebPACK-plugin' ); // widget introduced module.exports = { entry: './src/index.js' , Output: { path: path.resolve (__ dirname, 'dist' ), filename: 'the bundle [the hash:. 8] .js' }, plugins: [ new new HtmlWebpackPlugin ({Template: './index.html'}) // instantiated and root index.html file in the directory as a template ] };
This time you find, under dist folder, there are many packaged previously generated file, they are not automatically cleared. So you want to download the following plug-ins. To solve this problem.
(5) to install clean-webpack-plugin plugin (packaged file before clearing, leaving only the current package file)
npm install --save-dev clean-webpack-plugin
Introduced in the configuration file
After the package now before the file will automatically be cleared.
(6) is not yet introduced css style, css style in order to load, to download the style-loader, css-loader package
npm install --save-dev style-loader css-loader
In the src index.css new file and writes the style, and introduced into the document in index.js
The introduction of plug-in configuration file
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle[hash:8].js'
},
module: { //配置
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin({ template: './index.html' }),
new CleanWebpackPlugin()
]
};
Now packaged again, you can see the writing style already in force in the browser.
webpack only resolve js file, you want to parse css, pictures and other documents must download plug-ins (loader) (Reference webpack official website). To resolve Pictures download file-loader, url-loader.
(7) Download webpack-dev-server plug-ins
npm install webpack-dev-server --save-dev
Overwrite files package.json
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --mode production -w", "start":"webpack-dev-server --progress --open -w" //插入这行代码 }
--progress --open progress bar is displayed automatically open the browser -w monitor
Configuration in the configuration file
the require path = const ( 'path' ); const HtmlWebpackPlugin = the require ( 'HTML-WebPACK-plugin' ); const} {CleanWebpackPlugin = the require ( 'Clean-WebPACK-plugin' ); module.exports = { entry: './ the src / The index.js' , Output: { path: path.resolve (__ dirname, 'dist' ), filename: 'the bundle [the hash:. 8] .js' }, devserver: { inline: to true , // hot update, change file, the browser automatically updates port: 8000 // change the port to 8000 }, Module: { rules:[ { test: /\.css$/, use: ['style-loader', 'css-loader'] } ] }, plugins: [ new HtmlWebpackPlugin({ template: './index.html' }), new CleanWebpackPlugin() ] };
Now run npm start displays a progress bar packed (because now packed file is too small, you may not see) the browser will automatically jump out of the window.