前言
- webpack的配置文件
webpack.config.js中，包含了生产环境和开发环境时的所有配置，当打包时为了速率又要删除开发环境的配置，这样十分不友好，所以进行如下分离。
- 分离出来生产环境依赖配置文件(webpack.prod.config.js)和开发环境依赖配置文件(webpack.dev.config.js)，
- 将共有的才封装成一个配置文件 (webpack.base.config.js)
- 其余博客如下：
- webpack学习一：什么是模块化开发，什么是webpack，以及二者之间的关系。
- webpack学习二：webpack初始用打包，webpack初始用配置文件打包，webpack安装对应的loader
- webpack学习三：webpack初始化整合配置vue，一步一步的抽离代码块整合vue。
- webpack学习四：使用webpack配置plugin，来使用HtmlWebpackPlugin、uglifyjs-webpack-plugin、webpack-dev-server等插件简化开发
- webpack学习五：webpack的配置文件webpack.config.js分离，分离成开发环境和生产环境
一、分离说明
1. webpack.config.js 名称固定
webpack的配置文件是 webpack.config.js，这个名称是固定的，如果删除了这个文件，然后进行npm run build打包，会报错，如下截图所示：
说明这个名称是固定的
2. 生产环境和开发环境
前面也说过
开发环境：项目在开发时所依赖的环境；在上线或者发布时，项目时不依赖的。生产环境：项目上线或者发布时所以依赖的环境。在webpack.config.js 配置文件中，有的配置属于开发时依赖，有的是属于生产时依赖，也有的依赖的两个环境都需要的。
项目上线时，一般不会打包开发时的依赖，这样就会影响速率。
所以便有了将webpack.config.js 配置文件进行分开。分成三个配置文件，如下：
webpack.base.config.js：两个环境公共的部分webpack.dev.config.js：开发环境独有的配置webpack.prod.config.js：生产环境独有的配置
三、分离内容
1. 分离插件依赖：webpack-merge
分成三个配置文件，引入时，需要用到依赖：
webpack-merge安装如下
npm install webpack-merge@4.1.5 --save-dev将原来的配置文件
webpack.config.js中的内容复制三份到三个新的配置文件中，然后将这三个配置文件都放到build文件夹中，并且删除掉webpack.config.js配置文件。
目录如下：
其中
uglifyjs-webpack-plugin插件的使用是生产环境时的依赖，webpack-dev-server插件的使用时开发环境时的依赖。此时就先举两例。
2. webpack.base.config.js
- 这个配置文件是生产环境和开发环境共有的webpack的配置。一会儿会在
webpack.dev.config.js和webpack.peod.config.js这两个环境中进入的。（引入需要使用到刚才安装的依赖插件webpack-merge） - 删除（这里先注释）掉
uglifyjs-webpack-plugin和webpack-dev-server这两个插件的使用。
内容如下
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const uglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, '../dist'), // __dirname: 当前文件的目录
filename: 'bundle.js',
// publicPath: 'dist/'
},
module: {
rules: [
{
/*
* 使用多个 loader时，从右往左执行
* css-loader : 解析 CSS 文件后，使用 import 加载，并且返回 CSS 代码
* style-loader: 将模块的导出作为样式添加到 DOM 中
* */
test: /\.css$/, use: ['style-loader', 'css-loader']
},
{
test: /\.less$/,
use: [{
loader: 'style-loader' // creates style nodes from JS strings
}, {
loader: 'css-loader' // translates CSS into CommonJS
}, {
loader: 'less-loader' // compiles Less to CSS
}]
},
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
// 当加载的图片，小于 limit 时，会将图片编译成 base64字符串形式
// 当加载的图片，大于 limit 时，会使用 file-loader 模块进行加载
limit: 8192,
// 这个 name 配置 可以在 file-loader 的官网中看到
/*
* img 文件夹
* [name] 传过来的图片名称
* [hash:8] 哈希值取前8位
* [ext] 带上ext
* */
name: 'img/[name].[hash:8].[ext]'
}
}
]
},
{
test: /\.m?js$/,
// 排除 一些包
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-proposal-object-rest-spread']
}
}
},
{
test: /\.vue$/,
use: ['vue-loader']
}
],
},
resolve: {
// import 文件时，可以不写后缀，在这里配置，但是我这里不写配置不写后缀也可以成功。
extensions: ['.js', '.css', '.vue'],
// alias： 别名， $：以vue为结尾的
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
plugins: [
new webpack.BannerPlugin('最终版权归冯安晨所有！！！'),
new HtmlWebpackPlugin({
template: 'index.html'
}),
// new uglifyJsPlugin()
],
// devServer: {
// contentBase: './dist',
// inline: true
// }
}
- 主要修改地方如下：
3. webpack.dev.config.js
- 这里只保留
开发环境时用到的插件依赖webpack-dev-server即可。然后删除共有的，在引入webpack.base.config.js即可 内容如下：```
const webpackMerge = require('webpack-merge')
const baseConfig = require('./webpack.base.config')module.exports = webpackMerge(baseConfig, {
devServer: { contentBase: './dist', inline: true }})
```
4. webpack.prod.config.js
- 这里只保留
生产环境时用到的插件依赖uglifyjs-webpack-plugin即可。然后删除共有的，在引入webpack.base.config.js即可 - 内容如下：
const baseConfig = require('./webpack.base.config')
const webpackMerge = require('webpack-merge')
const uglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = webpackMerge(baseConfig, {
plugins: [
new uglifyJsPlugin()
]
})
5. 修改package.json 中的script脚本
- 这里没有了
webpack.config.js，在使用npm run build和npm run dev就会报最上面的错误，所以这里要指定webpack的配置文件 - 配置修改如下：
- 文件如下：
{
"name": "webpack_vue",
"version": "1.0.0",
"description": "1. css\r ```$xslt\r npm install --save-dev css-loader@2.0.2\r npm install --save-dev style-loader@0.23.1 --force\r ```\r 1. less\r ```$xslt\r npm install less-loader@4.1.0 less@3.9.0 --save-dev --force\r ```\r 3. 图片\r ```$xslt\r npm install url-loader@1.1.2 --save-dev --force\r npm install file-loader@3.0.1 --save-dev --force\r ```",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config build/webpack.prod.config.js",
"dev": "webpack-dev-server --open --config build/webpack.dev.config.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.12.13",
"@babel/preset-env": "^7.12.13",
"babel-loader": "^8.2.2",
"css-loader": "^2.0.2",
"file-loader": "^3.0.1",
"html-webpack-plugin": "^3.2.0",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"style-loader": "^0.23.1",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^1.1.2",
"vue": "^2.6.12",
"vue-loader": "^13.0.0",
"vue-template-compiler": "^2.6.12",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.3",
"webpack-merge": "^4.1.5"
}
}
到了这里，再使用打包命令或者开启本地服务器命令都可以执行成功了。
三、注意的地儿
当webpack.base.config.js 基础配置文件整理过后，一定要记得修改 打包后输出文件的路径，然后会打包到 build/dist 中的。修改如下：
output: {
path: path.resolve(__dirname, '../dist'), // __dirname: 当前文件的目录
filename: 'bundle.js',
// publicPath: 'dist/'
},
