16、webpack 根据DefinePlugin插件创建不同环
2019-08-09 本文已影响0人
圆梦人生
根据DefinePlugin插件创建生产和开发环境配置:
- 1、安装插件(合并插件)
yarn add webpack-merge -D
- 2、build/webpack.base.config.js
// 开发和生成模式共同的配置
let path = require('path');
// path.resolve 相对路径转成绝对路径
// console.log(path.resolve('dist'));
// 以当前目录
// console.log(__dirname);
// html-webpack-plugins 插件
let HtmlWebpackPlugins = require('html-webpack-plugin');
//
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
//
let webpack = require('webpack');
// webpack相关配置
module.exports = {
// 入口,表示从哪里开始打包
entry: {
home: './src/index.js'
},
// 表示出口(输出后文件相关配置)
output: {
// 打包后的文件名 多入口根据入口名称生成
filename: 'build.js',
// 输出后的路径(必须是一个绝对路径)
path: path.resolve(__dirname, '../dist')
},
// 插件配置
plugins: [
new HtmlWebpackPlugins({
// 模板位置
template: 'index.html',
// 文件名
filename: 'index.html'
}),
// 抽离css为单独文件
new MiniCssExtractPlugin({
filename: 'main.css'
})
],
//
resolve: {
// 解析三方库文件
//modules: [ path.resolve('node_modules') ],
// 扩展名
extensions: ['.js', '.css', '.json', '.vue'],
// 定义路径别名
alias: {
'@': path.resolve('src')
}
},
module: {
// loader
rules: [
{
test: /\.css$/, //匹配css文件
use: [ MiniCssExtractPlugin.loader, 'css-loader']
},
{
test: /\.less$/, //匹配less文件
use: [ MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
},
{
test: /\.js$/, //匹配js文件
use: {
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env'
]
}
}
}
]
}
}
- 3、build/webpack.dev.config.js
// dev模式的配置
const merge = require('webpack-merge');
// const { smart } = require('webpack-merge');
// 基础配置
let base = require('./webpack.base.config');
//
let webpack = require('webpack');
// 合并基础配置扩展开发模式配置
module.exports = merge(base, {
mode: 'development',
devtool: 'source-map',
//
devServer: {
// 端口,默认8080
port: '8099',
// 进度条
progress: true,
// 启动后访问目录,默认是项目根目录,这个设置到打包后目录
contentBase: './build'
},
plugins: [
// 环境区分
new webpack.DefinePlugin({
DEV: JSON.stringify('development')
})
]
})
- 4、build/webpack.pro.config.js
// 生产模式的配置
const { smart } = require('webpack-merge');
// 基础配置
let base = require('./webpack.base.config');
//
let webpack = require('webpack');
// 合并基础配置扩展生产模式配置
module.exports = smart(base, {
//
mode: 'production',
//
plugins: [
// 环境区分
new webpack.DefinePlugin({
DEV: JSON.stringify('production')
})
]
})
- 5、index.js
console.log('现在环境:', DEV);