1.安装webpack-dev-server
npm i webpack-dev-server
2.安装cross-env
npm i cross-env
3.安装HTML支持文件
npm i html-webpack-plugin
4.配置pack.json文件
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"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.配置config文件
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin');
+ const HTMLPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
const isDev = process.env.NODE_ENV =='development'
const config= {
target:'web',
entry: path.join(__dirname, "src/index.js"), //输入文件
output: {
filename: "build.js", //输出文件
path: path.join(__dirname, 'dist') //输出路径
},
module:{
rules:[
{
test:/\.vue$/,
loader:'vue-loader'
},
{
test:/\.css$/,
use:['style-loader','css-loader']
},
{
test:/\.(gif|png|jpg|jpeg|svg)$/,
use:[{
loader:'url-loader',
options:{
limit:1024,
name:'[name]-[hash].[ext]'
}
}]
},
{
test:/\.styl$/,
use:['style-loader','css-loader','stylus-loader']
}
]
},
plugins: [
// make sure to include the plugin for the magic
new VueLoaderPlugin(),
new webpack.DefinePlugin({
'process.env':{
NODE_ENV:isDev?'"development"':'"production"',
}
}),
new HTMLPlugin(),
],
}
if(isDev){
config.devtool='#cheap-module-eval-source-map',
config.devServer={
port:8000,
host:'0.0.0.0',
overlay:{
errors:true
},
// open:true //每次都打开一个网页
hot:true //只渲染一个组件
}
config.plugins.push(
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
)
}
module.exports=config
