未拆分版本webpack.config.js
const path = require('path');//引入node的path模块
const webpack = require('webpack');//引入的webpack，使用Lodash
const HtmlWebpackPlugin = require('html-webpack-plugin') //将html打包
const ExtractTextPlugin = require('extract-text-webpack-plugin') //打包的css拆分，将一部分
const CopyWebpackPlugin = require('copy-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
//console.log(path.resolve(__dirname,'dist'));//物理地址拼接
module.exports = {
entry:'./src/index.js',//入口文件
output:{
path:path.resolve(__dirname,'dist'),//定位。输出文件的目标路径
filename:'[name].js',
chunkFilename: '[name].[hash:8].js' // 指定分离出来的代码文件的名称
},
optimization: {
splitChunks: {
chunks: "all", // 所有的 chunks 代码公共的部分分离出来成为一个单独的文件
},
minimizer: [new UglifyJsPlugin()],//压缩js
},
module:{
rules:[
{
test:/\.js$/,//es6 => es5
include:[path.resolve(__dirname,'src')],
// exclude:[],不匹配选项(优先级高于test和include)
use:'babel-loader'
},{
test:/\.less/,
use:ExtractTextPlugin.extract({
fallback:'style-loader',
use:[
{
loader:'css-loader',
options:{
minimize:true, //使用css的压缩功能
}
},
{
loader:'less-loader',
options:{
minimize:true, //使用css的压缩功能
}
},
]
})
},
//这里需要图片精灵优化，但由于webpack4不支持
/* { //图片loader
test:/\.(png|jpg|gif)$/,
use:[
{
loader:'file-loader' //根据文件地址加载文件
}
]
}*/
{
test: /.*\.(gif|png|jpe?g|svg|webp)$/i,
use: [
{
loader: 'file-loader',
options: {}
},
{
loader: 'image-webpack-loader',
options: {
mozjpeg: { // 压缩 jpeg 的配置
progressive: true,
quality: 65
},
optipng: { // 使用 imagemin-optipng 压缩 png，enable: false 为关闭
enabled: false,
},
pngquant: { // 使用 imagemin-pngquant 压缩 png
quality: '65-90',
speed: 4
},
gifsicle: { // 压缩 gif 的配置
interlaced: false,
},
webp: { // 开启 webp，会把 jpg 和 png 图片压缩为 webp 格式
quality: 75
},
}
}, {
loader:'url-loader',
options:{
limit:8192.//单位是Byte，当文件小于8kb时作为DataURL处理
}
}
]
},
]
},
resolve:{ //解析模块的可选项
// modules:[] //模块的查找目录 配置其他的css等文件
//extensions:[".js",".json",".jsx",".less",".css"],//用到文件的扩展名
extensions:[".js"],
alias:{ //模块别名列表
utils:path.resolve(__dirname,'src/utils')
}
},
plugins:[
new HtmlWebpackPlugin({
filename:'index.html',// 配置输出文件名和路径
template:'assets/index.html', // 配置文件模板
minify:{ //压缩HTML的配置
minifyCSS:true,// 压缩HTML中出现的CSS代码
minifyJS:true //压缩HTML中出现的JS代码
}
}),
new CopyWebpackPlugin([ //src下其他的文件直接复制到dist目录下
{
from:'src/assets/favicon.ico',
to:'favicon.ico'
}
]),
new webpack.ProvidePlugin({ //引用框架jquery lodash工具库是很多组件会复用的，省去了import
'_':'lodash' //引用webpack
}),
new webpack.NamedModulesPlugin(), // 用于启动 HMR 时可以显示模块的相对路径
new webpack.HotModuleReplacementPlugin(), // Hot Module Replacement 的插件
],
devServer: {
port: 8080, // 端口号
host: 'localhost',
https: false, // https:{type:Boolean}
open: true, // 配置自动启动浏览器
hot:true,
// proxy: 'http://192.168.9.120:8081',
// proxy: 'http://47.106.65.135:7100' // 配置跨域处理,只有一个代理
// proxy: 'http://14.29.227.88:8082' // 配置跨域处理,只有一个代理
proxy: 'http://192.168.52.175:8087' // 配置跨域处理,只有一个代理
// proxy: {
// '/api': {
// target: '<url>',
// ws: true,
// changeOrigin: true
// },
// '/foo': {
// target: '<other_url>'
// }
// } // 配置多个代理
}
}
/*"scripts":{
"build":"webpack -- mode production",
"start":"webpack-dev-server --mode development"
}*/
/*
在 .babelrc 配置中增加 "modules": false 这个配置：
{
"presets": [["env", { "modules": false }]]
}
通过给 package.json 加入 sideEffects: false
*/
拆分后 webpack.conig.js
module.exports = function(env, argv) {
return argv.mode === 'production' ?
require('./configs/webpack.production') :
require('./configs/webpack.development')
}
webpack.development.js webpack.production.js webpack.base.js
const merge = require('webpack-merge')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const baseConfig = require('./webpack.base')
const config = merge.smart(baseConfig, {...})
