Use webpack premise: already installed npm (install node.js already contains npm)
1. Install webpack
Use webstorm open the project folder, enter the command-line tool
npm init -y //初始化npm
npm install webpack webpack-cli --save-dev //安装webpack 及webpack-cli（此工具用于在命令行中运行 webpack）
[Optional]: to prevent accidental release
We also need to adjust package.json file to ensure that our installation package is private (private), and remove the main entrance. This prevents accidental release your code.
[File: package.json]
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
+ "private": true, //添加
- "main": "index.js", //删除
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.0.1",
"webpack-cli": "^2.0.9"
},
"dependencies": {}
}
2. Install the dependent libraries
npm install --save LibraryName （LibraryName为所依赖的库名称）
3. Import our library js file
import $ from 'jquery'; //示例导入jquery库
In this case you can use npx webpackthe command to the other documents will be packaged index.js ./dist/main.js files, html files in this document can be introduced using
4. Create webpack profile webpack.config.js
[File: webpack.config.js]
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
This is possible using the npx webpack --config webpack.config.jscommand building
5. simplify building codes
Add a script npm (npm script) in package.json:
[file package.json]
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
+ "build": "webpack" //添加
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.0.1",
"webpack-cli": "^2.0.9",
"lodash": "^4.17.5"
}
}
Then you can use the npm run buildcommand to build
[Optional]: output multiple files
Now adjust the configuration. We will add entry src / print.js entry as a new starting point (print), then modify the output, according to dynamically generate bundle inlet origin Title Name:
[File: webpack.config.js]
const path = require('path');
module.exports = {
- entry: './src/index.js', //删除
+ entry: { //添加
+ app: './src/index.js', //添加
+ print: './src/print.js' //添加
+ }, //添加
output: {
- filename: 'bundle.js', //删除
+ filename: '[name].bundle.js', //添加
path: path.resolve(__dirname, 'dist')
}
};
Then still use the npm run buildcommand to build
6. Add inline-source-map development tools, error location
[File: webpack.config.js]
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
+ devtool: 'inline-source-map', //添加
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Development'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
Then you can output an error message on the console Development
7. Set the automatic construction with the browser automatically updates
1. automatically recompile observation mode: webpack --watch
[File: package.json]
{
"name": "development",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
+ "watch": "webpack --watch", //添加
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"clean-webpack-plugin": "^0.1.16",
"css-loader": "^0.28.4",
"csv-loader": "^2.1.1",
"file-loader": "^0.11.2",
"html-webpack-plugin": "^2.29.0",
"style-loader": "^0.18.2",
"webpack": "^3.0.0",
"xml-loader": "^1.2.1"
}
}
Run npm run watch, then modify the code webpack will automatically recompile building
2. automatically recompiled with the browser automatically refresh webpack-dev-server
1. First mounting webpack-dev-server
npm install --save-dev webpack-dev-server
[File: webpack.config.js]
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
devtool: 'inline-source-map',
+ devServer: { //添加
+ contentBase: './dist' //添加
+ }, //添加
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Development'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
The above configuration informed webpack-dev-server, on localhost: 8080 establishment of service under the dist directory under the file , as the files can be accessed.
2. Let's add a script script, you can run the development server (dev server) directly:
[File: package.json]
{
"name": "development",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --watch",
+ "start": "webpack-dev-server --open", //添加
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"clean-webpack-plugin": "^0.1.16",
"css-loader": "^0.28.4",
"csv-loader": "^2.1.1",
"file-loader": "^0.11.2",
"html-webpack-plugin": "^2.29.0",
"style-loader": "^0.18.2",
"webpack": "^3.0.0",
"xml-loader": "^1.2.1"
}
}
Now, we can run from the command line npm start, you will see the browser automatically loads the page. If you now modify and save any source file, web servers automatically reload the compiled code!
Operation summary
1. Command Line (1. Initialization 2.webpack 3.dev-server)
npm init -y //初始化npm
npm install webpack webpack-cli --save-dev //安装webpack 及webpack-cli（此工具用于在命令行中运行 webpack）
npm install --save-dev webpack-dev-server //自动重新编译与浏览器的自动刷新 webpack-dev-server
npm install --save LibraryName（库名） //（自己所需的库）
npm run watch //监控文件内容改变自动编译
npm start //浏览器自动刷新
2. File webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
devtool: 'inline-source-map',
devServer: {
contentBase: './dist'
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
3. File package.json (1.watch 2.start 3. Build)
{
"name": "development",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --watch", //添加
"start": "webpack-dev-server --open", //添加
"build": "webpack" //添加
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^3.0.0"
}
}
Note: Do not forget to introduce html file has been compiled