After every time we modify the code, if you want to see changes in the browser, you must first manually compiled code, so is somewhat cumbersome
In webpack, configure some options that can help us to automatically compile the code after the code changes
1, there is a problem
First, we build a simple project, feel is not being used before automatically compile project development in
Create an empty folder Demoas the project's root directory, run the following command in the directory installation project required dependencies
> # 创建 package.json 文件
> npm init -y
> # 安装 webpack
> npm install --save-dev webpack
> npm install --save-dev webpack-cli
> # 安装 lodash
> npm install --save lodashThen we created in the root directory distand srcdirectory, and create the appropriate file in the appropriate directory, the directory structure is as follows final
Demo
- package.json
- package-lock.json
- webpack.config.js
+ node_modules
+ src
- index.js
+ dist
- index.htmlwebpack.config.js Contents of the file, specify some basic configuration webpack
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};package.json Contents of the file, add the package command npm run build
{
"name": "Demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.39.2",
"webpack-cli": "^3.3.7"
},
"dependencies": {
"lodash": "^4.17.15"
}
}/dist/index.htmlFile contents, after the introduction of the package bundle.jsfile
<!doctype html>
<html>
<head>
<title>Demo</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>/src/index.jsContents of the file, create a div, and as a bodychild node
import _ from 'lodash';
function component() {
var element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());At this point, a rough Demo to build complete it, run the command to complete building package
> npm run buildThen open the browser /dist/index.htmlfile, you should see Hello webpackthe text
Well, now if we are to make the project a little modification, so that the text displayed on the screen becomes Hello World
Very simple, right! Only you need to modify /src/index.jsa bit the contents of the file on the line
import _ from 'lodash';
function component() {
var element = document.createElement('div');
// 将 webpack 改成 World 就好
element.innerHTML = _.join(['Hello', 'World'], ' ');
return element;
}
document.body.appendChild(component());However, this time we have to re-run the build command npm run buildto make the changes to take effect
This is very convenient, especially for front-end code, and sometimes really need to repeatedly modify and compile a dozen times or even dozens of times
2, to solve the problem
So, is there a way to make changes to the code after ( after saving automatic compilation) do? The answer is yes
webpack There are two common ways to achieve this effect
（1）watch mode
The first method is to use a watch mode, by definition, to be automatically compiled code after the code changes observed
We can pass command-line arguments webpack the --watchdesignated use, so that when the code is changed, will automatically compile webpack
> npx webpack --config webpack.config.js --watchOr we can add npm script script for later use, modify the package.jsonfile as follows
{
"name": "Demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js",
"watch": "npx webpack --config webpack.config.js --watch"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.39.2",
"webpack-cli": "^3.3.7"
},
"dependencies": {
"lodash": "^4.17.15"
}
}Well, open observation mode
> npm run watchNow modify the code, save the file, refresh your browser, you should be able to see the effect after modifying it, the only drawback is that the browser does not automatically refresh
（2）webpack-dev-server
The second method is to use webpack-dev-server, providing a simple web server, real-time load
First, we install some modules
> npm install --save-dev webpack-dev-serverThen webpack.config.jswrite down the relevant configuration file
Tell server should be localhost:8080established under the service, and then distset the file directory is accessible
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
// 开启开发服务器
devServer: {
contentBase: './dist'
}
};Npm script also add a script for later use, modify the package.jsonfile as follows
{
"name": "Demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js",
"watch": "webpack --config webpack.config.js --watch",
"start": "webpack-dev-server --open"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.39.2",
"webpack-cli": "^3.3.7"
},
"dependencies": {
"lodash": "^4.17.15"
}
}OK, now open development server
> npm startAfter modifying the code, save the file, you should see the browser automatically refresh and display the results after revision
[Read more webpack series, please see webpack study notes ]