1.安装webpack-dev-server依赖
npm i webpack-dev-server
2.编辑package.json
添加下面配置代码
"dev": "webpack-dev-server --config webpack.config.js"
3.安装cross-env
npm i cross-env
修改package.json
"build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"
4.安装html-webpack-plugin
npm i html-webpack-plugin
5.编辑webpack.config.js
const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')
const HTMLPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
const isDev = process.env.NODE_ENV === 'development'
const config = {
entry: path.join(__dirname, 'src/index.js'),
output: {
filename: "bundle.js",
path: path.join(__dirname, 'dist')
},
plugins: [
new webpack.DefinePlugin({
'process.env':{
NODE_ENV: isDev ? '"development"' : '"production"'
}
}),
new VueLoaderPlugin(),
new HTMLPlugin(),
],
module: {
rules: [
{
test: /\.vue$/,
loader: "vue-loader"
},
{
test:/\.css$/,//正则表达式
use:[
'style-loader',
'css-loader'
]
},
{
test:/\.styl/,
use:[
'style-loader',
'css-loader',
'stylus-loader'
]
},
{
test: /\.(gif|jpg|jpeg|png|svg)&/,
use:[
{
loader: "url-loader",
options: {
limit:1024,
name:'[name].[ext]'
}
}
]
}
]
}
}
if (isDev) {
config.devServer = {
port:8000,
host:'0.0.0.0',
overlay:{
error:true
},
hot:true
}
config.plugins.push(
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
)
}
module.exports = config;
6.编辑package.json
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"
7.运行命令
npm run dev