# # 1. Test environment:
Recommend this article: very detailed
Https://www.cnblogs.com/lhweb15/p/5660609.html
# # # 1. Webpack.config.js Self-installing
"' JavaScript
{
"Name": "Vuetest",
"Version": "1.0.0",
"description": "",
"Main": "Index.js",
"Scripts": {
"Start": "Webpack--display-modules--display-chunks--config build/webpack.config.js",
"Test": "Echo \" Error:no test specified\ "&& exit 1"
},
"Author": "",
"License": "ISC",
"Dependencies": {
"Babel-loader": "^7.1.4",
"babel-preset-es2015": "^6.24.1",
"Css-loader": "^0.28.11",
"File-loader": "^1.1.11",
"Html-webpack-plugin": "^3.2.0",
"Less": "^3.0.4",
"Less-loader": "^4.1.0",
"Style-loader": "^0.21.0",
"Vue": "^2.5.16",
"Webpack": "^4.12.0",
"Webpack-dev-server": "^3.1.4"
},
"Devdependencies": {
"Babel-cli": "^6.26.0",
"Express": "^4.16.3",
"Webpack-cli": "^3.0.8",
"Webpack-dev-middleware": "^3.1.3",
"Webpack-hot-middleware": "^2.22.2"
}
}
```
# # # # 2. configuration file:
Dev-clietn.js
"' JavaScript
var hotclient = require (' webpack-hot-middleware/client ')
Subscribe to Events when event.action = = = ' Reload ' When performing a page refresh
Hotclient.subscribe (function (event) {
if (event.action = = = ' Reload ') {
Window.location.reload ()
}
})
```
Webpack.config.js
"' JavaScript
Path module in the Nodejs
var path = require (' path ');
var htmlwebpackplugin = require (' Html-webpack-plugin ');
var webpack = require (' Webpack ');
Module.exports = {
Mode: "Development",
entry:[' Webpack-hot-middleware/client ', Path.resolve (__dirname, ' ... /app/index.js ')],
Entry: {
App: [
'./build/dev-client ',
Path.resolve (__dirname, ' ... /app/index.js ')
]
},
Output configuration
Output: {
The output path is myproject/output/static
Path:path.resolve (__dirname, './static '),
Publicpath: ' static/',
Publicpath: "/",
FileName: ' [name]. [Hash].js ',
Chunkfilename: ' [id]. [Chunkhash].js '
},
resolve:{
alias:{
' vue$ ': ' Vue/dist/vue.js '
}
},
module:{
Rules: [
{test:/\.vue$/, Loader: ' Vue-loader '},
{test:/\. (EOT|WOFF|WOFF2|SVG|TTF) ([\?]?. *) $/,loader: "File-loader"},
{test:/\. (png|jpg|gif) $/,loader: ' url-loader?limit=8192 '},
{test:/\.less$/i, use: [' Style-loader ', {loader: ' Css-loader ', options: {importloaders:1}}, ' Less-loader ']},
]
},
Plugins: [
Add three Plugins
New Webpack.optimize.OccurrenceOrderPlugin (),
New Webpack. Hotmodulereplacementplugin (),
New Webpack. Noemitonerrorsplugin (),
New Htmlwebpackplugin ({
FileName: ' index.html ',
Template:path.resolve (__dirname, ' ... /app/index.html '),
Inject:true
}),
]
}
```
Webpack.dev.config.js
"' JavaScript
Introducing the necessary modules
var express = require (' Express ')
var webpack = require (' Webpack ')
var config = require ('./webpack.config ')
Create an Express instance
var app = Express ()
Call Webpack and pass the configuration over
var compiler = Webpack (config)
Using Webpack-dev-middleware Middleware
var devmiddleware = require (' Webpack-dev-middleware ') (compiler, {
PublicPath:config.output.publicPath,
Stats: {
Colors:true,
Chunks:false
}
})
var hotmiddleware = require (' Webpack-hot-middleware ') (compiler)
Webpack plugin, monitor HTML file Change event
Compiler.plugin (' compilation ', Function (compilation) {
Compilation.plugin (' Html-webpack-plugin-after-emit ', function (data, CB) {
Publish Events
Hotmiddleware.publish ({action: ' Reload '})
CB ()
})
})
Register middleware
App.use (Devmiddleware)
App.use (Hotmiddleware)
Listen for 8881 ports, turn on the server
App.listen (8881, function (err) {
if (err) {
Console.log (ERR)
Return
}
Console.log (' Listening at http://localhost:8881 ')
})
```
# # 2. Production environment
# # # 3. Packaging optimization
Webpack Package Vue--Simple explanation