### 1. 测试环境:
推荐这篇文章:讲的很细致
https://www.cnblogs.com/lhweb15/p/5660609.html
1. webpack.config.js自行安装
{
"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.配置文件：
dev-clietn.js
var hotClient = require('webpack-hot-middleware/client')
// 订阅事件，当 event.action === 'reload' 时执行页面刷新
hotClient.subscribe(function (event) {
if (event.action === 'reload') {
window.location.reload()
}
})
webpack.config.js
// nodejs 中的path模块
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: {
// 输出路径是 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: [
// 添加三个插件
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
// 引入必要的模块
var express = require('express')
var webpack = require('webpack')
var config = require('./webpack.config') // 创建一个express实例
var app = express() // 调用webpack并把配置传递过去
var compiler = webpack(config) // 使用 webpack-dev-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插件，监听html文件改变事件
compiler.plugin('compilation', function (compilation) {
compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
// 发布事件
hotMiddleware.publish({ action: 'reload' })
cb()
})
})
// 注册中间件
app.use(devMiddleware)
app.use(hotMiddleware)
// 监听 8881端口，开启服务器
app.listen(8881, function (err) {
if (err) {
console.log(err)
return
}
console.log('Listening at http://localhost:8881')
})
### 2. 生产环境
### 3.打包优化