一、生产环境
二、提取公共代码 webpack-merge
1、安装
npm install -D webpack-merge
2、创建build目录
创建三个文件
webpack.base.js:公共配置
const path = require('path')
// 引入vue-loader的插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// 引入webpack插件
const webpack=require('webpack')
module.exports = {
entry: './src/mian.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, '../dist')
},
module: {
rules: [{//当遇到以vue结尾文件时,用vue-loader来打包
test: /\.vue$/,
loader: 'vue-loader'
}, {//当遇到以以下结尾文件时,用file-loader来打包
test: /\.(jpg|jpeg|png|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]'
},
}, {//当遇到以以下结尾文件时,用 css-loader来打包
test: /\.css$/,
use: ['style-loader', 'css-loader'],
}, {//stylus-loader
test: /\.styl(us)$/,
use: ['style-loader', 'css-loader', 'postcss-loader', 'stylus-loader']
},]
},
// 插件
plugins: [
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template: './index.html'
}),
new CleanWebpackPlugin(),
],
// 别名设置
resolve: {
alias: {
'vue': 'vue/dist/vue.js'
}
}
}
webpack.dev.js:开发环境配置
const baseConfig=require('./webpack.base.js')
const {merge} =require('webpack-merge')
// 引入webpack插件
const webpack=require('webpack')
const devConfig = {
mode: 'development',
devServer:{
contentBase:'./dist',
open:true,
hot:true
},
// 插件
plugins: [
new webpack.HotModuleReplacementPlugin()
],
}
module.exports=merge(baseConfig,devConfig)
webpack.prod.js:生产环境配置
const baseConfig=require('./webpack.base.js')
const {merge} =require('webpack-merge')
const prodConfig = {
mode: 'production',
}
module.exports=merge(baseConfig,prodConfig)
3、修改配置
在package.json中:
"scripts": {
"dev": "webpack-dev-server --config ./build/webpack.dev.js",
"build": "webpack --config ./build/webpack.prod.js"
},
注意修改这个路径,__dirname是代表build目录,如果想要dist目录在根目录,是要在build目录上一级
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, '../dist')
},
4、测试
运行:npm run dev
运行:npm run build