两种配置模式:
(1)webpack.dev.js
(2)webpack.pro.js
一、开发环境配置
const { resolve } = require('path');
const autoprefixer = require('autoprefixer');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
entry: './main.js',
output: {
filename: 'boundle.js',
path: resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
use: {
// webpack 和 babel之间的桥梁
loader: 'babel-loader'
},
// 不编译nodule_modules模块中的代码
exclude: /node_modules/
},
{
test: /\.css$/,
loader: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [autoprefixer]
}
}
}
]
},
{
// 处理图片
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
name: '[name].[ext]',
outputPath: 'imgs/',
limit: 8192
}
}
]
},
{
test: /\.scss$/,
loader: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [autoprefixer]
}
}
},
'sass-loader'
]
},
// 处理字体图标文件
{
test: /\.(eot|svg|ttf|woff)/,
use: {
loader: 'file-loader',
options: {
outputPath: 'fonts/'
}
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: resolve(__dirname, './src/index.html')
}),
new CleanWebpackPlugin()
]
};
const webpack = require('webpack');
const { merge } = require('webpack-merge'),
commBase = require('./webpack.base');
const webpack_dev = {
mode: 'development',
devServer: {
contentBase: './dist',
open: true,
// 开启热更新
hot: true,
port: '3000'
},
// 开启tree shaking
optimization: {
usedExports: true
},
devtool: 'cheap-module-eval-source-map',
plugins: [new webpack.HotModuleReplacementPlugin()]
};
module.exports = merge(webpack_dev, commBase);
二、生产环境配置
const { merge } = require('webpack-merge');
const commBase = require('./webpack.base');
const webpack_prod = {
mode: 'production',
// 开启tree shaking
devtool: 'cheap-module-source-map'
};
module.exports = merge(webpack_prod, commBase);
三、配置命令
3.1 配置公共文件:
3.1.1 webpack-merge
npm i webpack-merge -D
可以合并两个默认的webpack
配置,具体查看github
的用法
开发环境的配置信息 公共的配置