如果你喜欢这系列的文章,欢迎star
我的项目,源码地址,点击这里
配置生产环境
根目录下新建一个 webpack.prod.conf.js
文件
先将 webpack.dev.conf.js
文件的内容,全部复制到该文件中
然后我们需要做以下几处修改:
- 删除
devServer
配置项的代码 - 出口配置
filename: 'js/[name].[hash].js'
改为filename: 'js/[name].[chunkhash].js'
, 开发环境设置为hash
是因为这个和webpack-dev-server
不兼容 devtool
的配置改为cheap-module-source-map
- 删除
plugins
配置中的new webpack.HotModuleReplacementPlugin(),
生产环境已经不需要热加载,不删除会报错 - 修改
mode
配置为production
- 删除头部引入的关于开发服务的插件
plugins
中,添加new webpack.HashedModuleIdsPlugin()
实现持久化缓存
具体配置如下:
const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 入口文件配置项
entry:{
app:[path.resolve(__dirname, 'src/index.js')],
},
// 输出文件配置项
output:{
path:path.resolve(__dirname,"dist"),
filename: 'js/[name].[chunkhash].js',
chunkFilename: 'js/[name].[chunkhash].js',
publicPath:""
},
// 开发工具
devtool: 'cheap-module-source-map',
// webpack4.x 环境配置项
mode:"production",
// 加载器 loader 配置项
module:{
rules:[
{
test: /\.(js|jsx)$/,
use: ['babel-loader?cacheDirectory=true'],
include: path.resolve(__dirname, 'src')
},
{
test: /\.css$/,
use: [{
loader: 'style-loader'
},{
loader: 'css-loader'
},{
loader: 'postcss-loader',
options: {
sourceMap: true,
config: {
path: 'postcss.config.js'
}
}
}
]
},
{
test: /\.scss$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
config: {
path: 'postcss.config.js'
}
}
},
{
loader: 'sass-loader',
options: { sourceMap: true }
}
],
exclude: /node_modules/
},
{
test: /\.less$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
importLoaders: 1,
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
config: {
path: 'postcss.config.js'
}
}
},
{
loader: 'less-loader',
options: {
sourceMap: true,
}
}
]
},
{
test: /\.(png|jp?g|gif|svg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192, // 小于8192字节的图片打包成base 64图片
name:'images/[name].[hash:8].[ext]',
publicPath:''
}
}
]
},
{
// 文件依赖配置项——字体图标
test: /\.(woff|woff2|svg|eot|ttf)$/,
use: [{
loader: 'file-loader',
options: {
limit: 8192,
name: 'fonts/[name].[ext]?[hash:8]',
publicPath:''
},
}],
}, {
// 文件依赖配置项——音频
test: /\.(wav|mp3|ogg)?$/,
use: [{
loader: 'file-loader',
options: {
limit: 8192,
name: 'audios/[name].[ext]?[hash:8]',
publicPath:''
},
}],
}, {
// 文件依赖配置项——视频
test: /\.(ogg|mpeg4|webm)?$/,
use: [{
loader: 'file-loader',
options: {
limit: 8192,
name: 'videos/[name].[ext]?[hash:8]',
publicPath:''
},
}],
}, {
test:/\.html$/,
use:[
{
loader:"html-loader",
options:{
attrs:["img:src","img:data-src"]
}
}
]
}
]
},
// 插件配置项
plugins: [
new webpack.HashedModuleIdsPlugin(),
new HtmlWebpackPlugin({
filename: 'index.html',//输出文件的名称
template: path.resolve(__dirname, 'src/index.html'),//模板文件的路径
title:'webpack-主页',//配置生成页面的标题
}),
],
}
然后在 package.json
文件中增加打包脚本
"build":"webpack --config webpack.prod.conf.js"
然后执行 npm run build
项目根目录中是不是已经生成 dist
文件夹,其内就是打包的生产环境的文件了~