Use WebpackDevServer enhance development efficiency
we modify the code, if you want to run right in your browser, you need to manually packaged npm run bundle, so our development efficiency is very low, we hope that, if changed src following the original code, then dist directory on automatically packaged, so much easier, it does not always run npm run bundleup.
To achieve this function, there are three approaches
Method One: webpack --watch
open package.json file, when we run npm run bundlewhen, in fact, running webpack command, we can add to it a watch
"scripts": {
"bundle": "webpack --watch"
},
Then execute npm run bundle, after modifying src following. Automatically executed npm run bundle
when adding a watch parameters of time, what does it mean? Meaning webpack will help us to monitor packed files, as long as the package file is changed, it will automatically re-packaged.
We want to first run npm run bundletime, to help us achieve automatic packing and open the browser, but also can simulate some of the features on the server, so the configuration webpack by package.json --watch to die
Method Two: webpack -dev-server
by means of WebpackDevServer to help us
install WebpackDevServer, npm install webpack-dev-server -D
configure devServer in the webpack.config.js
devServer: {
contentBase: './dist'
},
One of the most basic configuration of contentBase, meaning that the server should play in which a folder because the resulting files are packaged in dist directory, so we must rely on webpack devServer help from a server, the server's root path in the current directory under the dist file as a devServer configuration, go package.json script to add webpack-dev-server
"scripts": {
"bundle": "webpack --watch",
"start": "webpack-dev-server"
},
Run npm run start
telling us has helped us from a server called http: // localhost: 8080 /, we can go directly to access this address, showing our project, this time to modify the contents of index.js, can be monitored webpack to, do not need to re-run npm run start, the benefits webpack-dev-server is that not only can listen to the file is changed again to help us pack, will help us to automatically refresh the browser, so you can use it more convenient to enhance the efficiency of the code development .
Method three: myself a server
when devServer immature, are on their own configuration (now devServer very mature, can not rely on their own configuration)
scripts in the plus package.json called middleware configuration
"scripts": {
"bundle": "webpack --watch",
"start": "webpack-dev-server --host 0.0.0.0",
"middleware": "node server.js"
},
When run npm run middleware, want to write a server, this server if listening to the src directory there is a change, will be the same to webpack-dev-server, automatically help us to restart the server, update the content on the page, then how to write such a server .js it
first create a directory with a server.js
to create a server in the server, to the next node in the environment, you need to install express, help us quickly build a server, the server to listen for changes webpack help repackage, Therefore, also by means of a developing member WebPACK intermediate-dev-Middleware WebPACK
1. both plug-ins installed: npm install express webpack-dev-middleware -D
2. in doing webpack.config.js configuration:
output: {
publicPath: '/',
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
Plus the output publicPath: '/',, indicated by a reference to the front of the pack all generated files are added to a root path, the path will not confirm the package generated a problem
3. Write server.js:
First introduced express, webpack
then from a node server , create a server instance with the express, let this instance listens on port 3000, the port number yourself to be, you can write a callback function that will monitor the success of the implementation.
4. Run `npm run middleware
we have started a server in a 3000 port
5 and the introduction webpackDevMiddleware webpack.config.js (webpack profile) and complier (webpack compiler)
const webpackDevMiddleware = require('webpack-dev-middleware')
const config = require('./webpack.config.js')
const comlier = webpack(config)
7.app express an instance, the middleware may be used, through the use
app.use(webpackDevMiddleware(comlier), {
publicPath: config.output.publicPath
})
Meaning that as long as the file is changed, complier compiler will re-run, the output of packaged content file re-run of the corresponding publicPath is config.output.publicPath
8. run `npm run middleware
to modify the file, repackage, but no help us refreshed in real time, in fact, to write a server takes a lot of energy, it recommended devServer to achieve.
Added:
1. Why open such a server?
Sometimes we're going to write ajax request at the front, if it is opened directly in the form of a file, you can not send ajax request, because you want to send ajax request to index.html is located must be on a server via http protocol the way is open. Open is certainly not through the file protocol, which is why we want to help webpack-dev-server to help start a web server
when we use vue all know and react projects, will help us to open a server, which most of them using webpack-dev-server.
proxy: configuration, help us to do cross-domain simulation of the interface when the interface to use a proxy
Why can use this proxy interface agent and react in it in vue, because they all use the underlying devServer
official website: DOCUMENTATION ----> CONFIGURATION- > devserver
2.devServer configuration
devServer: {
contentBase: './dist',
open: true, // 在启动DevServer的时候，自动帮我们打开浏览器，
// 然后自动的访问服务器的地址
proxy: {
'api': 'http://localhost:3000' // 如果用户访问api这个地址，也就是访问locahost:8000下面的api这个路 径，会直接帮我们转发到locahost:3000这个地址，之所以之前的脚手架都可以这样配置，是因为底层使用了devServer
}，
port: 8090, // 设置端口号
host: "0.0.0.0"
},
"scripts": {
"bundle": "webpack --watch",
"start": "webpack-dev-server --host 0.0.0.0"
},
IP addresses can be accessed by
3 summarizes
three ways to simplify the development of
"scripts": {
"bundle": "webpack --watch",
"start": "webpack-dev-server --host 0.0.0.0",
"middleware": "node server.js"
},0
The first way is by means of webpack --watch, will be monitored to pack the code has changed, it will automatically help us execute package, but will not help us from a server, means that this way of packaging did not do over and over again do ajax requests and after each package, you need to refresh your browser.
The second method is webpack-dev-server, which is the most widely used method. After we installed webpack-dev-derver, in webpack.config.js configuration devServer, and then run the project will help us start a server, to help us pack the code, but also help us to automatically refresh the browser.
The third method is a handwritten content webpack-dev-server is similar to running middleware when you actually run a server.js file, use directly in the node in webpack
Official website: DOCUMENTATION-> API-> Comand Line Interface View webpack command on the command line
DOCUMENTATION-> API-> Node.js API in the node to run webpack, this is some use the interface
DOCUMENTATION-> GUIDES-> Development
