最近复习了一下webpack，使用的是4.0版本。
下图是基本目录结构，最后留有代码地址，有兴趣可以去看看。
直接上代码（依赖未完全使用）：
项目的所有依赖都可以安装，每个都有详细的注释。】
const path = require('path');
const uglify = require('uglifyjs-webpack-plugin'); //js压缩插件
const htmlPlugin = require('html-webpack-plugin'); //实现html打包功能，引用好路径的到html来
const glob = require('glob');
const CleanWebpackPlugin = require('clean-webpack-plugin');// 打包前先清空dist
const MiniCssExtractPlugin = require("mini-css-extract-plugin");//分离js中的css
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");//css压缩
const webpack = require('webpack');
const devMode = process.env.NODE_ENV !== 'production';
var website = {
publicPath: "http://localhost:8888/"
// publicPath:"http://192.168.1.103:8888/"
}
function recursiveIssuer(m) {
if (m.issuer) {
return recursiveIssuer(m.issuer);
} else if (m.name) {
return m.name;
} else {
return false;
}
}
module.exports = {
mode: 'production', // 模式配置 production,development
entry: { //入口文件配置
main: path.resolve(__dirname, './src/main.js'),
main2: path.resolve(__dirname, './src/main2.js'),
},
output: { //出口文件配置
//path.resolve把一个路径或路径片段的序列解析为一个绝对路径
path: path.resolve(__dirname, './dist'), // 打包后的目录，必须是绝对路径
filename: '[name].[hash:4].js', // [name]打包后的文件名称,进入是什么名字出来也是
chunkFilename: '[name].[hash].js',//文件开启按需加载后，会生成多个小文件
// 2.添加hash可以防止文件缓存，每次都会生成4位的hash串
// filename: 'bundle.[hash:4].js',
// path: path.resolve(__dirname, '../dist')
publicPath: website.publicPath //publicPath：主要作用就是处理静态文件路径的。
},
//模块，例如解读CSS，图片转换，压缩
module: {
rules: [
//babel 配置
{
test:/\.(jsx|js)$/,
use:{
loader:'babel-loader?cacheDirectory',//loader的cacheDirectory选项，开启后用缓存，提升打包速度
},
include: /src/, // 只转化src目录下的js
exclude:/node_modules/ //排除
},
//css loader
{
test: /\.(sa|sc|c)ss$/,
use: [
// devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
MiniCssExtractPlugin.loader,//js分离css,使用style-loader不会分离
'css-loader',
'postcss-loader',
'sass-loader',
],
},
//图片(主要css中) loader
{
test: /\.(png|jpg|gif|jpeg)/, //是匹配图片文件后缀名称
use: [{
loader: 'url-loader', //是指定使用的loader和loader的配置参数
options: {
limit: 500, //是把小于500B的文件打成Base64的格式，写入JS
outputPath: 'images/', //打包后的图片放到images文件夹下
}
}]
},
// 引用字体图片和svg图片
{
test: /\.(eot|ttf|woff|svg)$/,
use: 'file-loader'
},
// HTML中的图片
{
test: /\.(htm|html)$/i,
use: ['html-withimg-loader']
},
]
},
optimization: {
// minimize:true,//如果mode是production类型，minimize的默认值是true，执行默认压缩，
minimizer:[],
splitChunks: {
// chunks: "async",//三个个可选值：initial(初始块)、async(按需加载块)、all(全部块)，默认为all;
// 值为all/initial/async/function(chunk),值为function时第一个参数为遍历所有入口chunk时的chunk模块，
// chunk._modules为chunk所有依赖的模块，
// 通过chunk的名字和所有依赖模块的resource可以*配置,
// 会抽取所有满足条件chunk的公有模块，以及模块的所有依赖模块，包括css
// minSize: 30000, //表示在压缩前的最小模块大小,默认值是30kb
// minChunks: 1, // 表示被引用次数，默认为1；
// maxAsyncRequests: 5, //所有异步请求不得超过5个,最大的按需(异步)加载次数.默认为1;
// maxInitialRequests: 3, //初始话并行请求不得超过3个,最大的初始化加载次数，默认为1；
// automaticNameDelimiter:'~',//名称分隔符，默认是~
// name: true, //打包后的名称，默认是chunk的名字通过分隔符（默认是～）分隔
cacheGroups: {//设置缓存组用来抽取满足不同规则的chunk,下面以生成common为例
common: {
name: 'common', //抽取的chunk的名字
chunks(chunk) { //同外层的参数配置，覆盖外层的chunks，以chunk为维度进行抽取
},
test(module, chunks) { //可以为字符串，正则表达式，函数，以module为维度进行抽取，
// 只要是满足条件的module都会被抽取到该common的chunk中，
// 为函数时第一个参数是遍历到的每一个模块，第二个参数是每一个引用到该模块的chunks数组。
// 自己尝试过程中发现不能提取出css，待进一步验证。
},
// priority: 10, //优先级，一个chunk很可能满足多个缓存组，会被抽取到优先级高的缓存组中
// minChunks: 2, //最少被几个chunk引用
// reuseExistingChunk: true,// 如果该chunk中引用了已经被抽取的chunk，直接引用该chunk，不会重复打包代码
// enforce: true // 如果cacheGroup中没有设置minSize，则据此判断是否使用上层的minSize，true：则使用0，false：使用上层minSize
},
fooStyles: {
name: 'main',
test: (m,c,entry = 'main') => m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
chunks: 'all',
enforce: true
},
barStyles: {
name: 'main2',
test: (m,c,entry = 'main2') => m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
chunks: 'all',
enforce: true
}
}
}
},
//插件，用于生产模版和各项功能
plugins: [
new CleanWebpackPlugin('dist'), // 打包前先清空
new uglify(
// {//js压缩插件
// cache: false,//启用文件缓存
// parallel: true,//使用多进程并行运行来提高构建速度
// sourcMap: true//使用源映射将错误消息位置映射到模块（这会减慢编译速度）
// }
),
new MiniCssExtractPlugin({//分离js中的css
// 类似 webpackOptions.output里面的配置 可以忽略
// filename，对应于entry里面生成出来的文件名
// chunkFilename，未被列在entry中，却又需要被打包出来的文件命名配置，如异步加载的模块文件
filename: devMode ? 'css/[name].css' : '[name].[hash].css',//可以更变文件产生路径
chunkFilename: devMode ? 'css/[id].css' : '[id].[hash].css',
}),
new OptimizeCSSAssetsPlugin({//css压缩
// assetNameRegExp: /\.main\.css$/g,//一个正则表达式，指示应优化\最小化的文件的名称。
// cssProcessor: require('cssnano'),//用于优化\最小化CSS的CSS处理器，默认为cssnano
// cssProcessorPluginOptions: {},//传递给cssProcessor的选项，默认为 {}
// canPrint: true//一个布尔值，指示插件是否可以将消息打印到控制台，默认为 true
}),
new htmlPlugin({
minify: { //是对html文件进行压缩
removeAttributeQuotes: true //removeAttrubuteQuotes是却掉属性的双引号。
},
hash: true, //为了开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS。
template: './src/index.html' //是要打包的html模版路径和文件名称。
}),
new webpack.HotModuleReplacementPlugin(), // 热更新，热更新不是刷新
],
//配置webpack开发服务功能,npm install webpack-dev-server
devServer: {
//设置基本结构
contentBase: path.resolve(__dirname, '../dist'),
host: 'localhost',//服务器IP地址,可以是localhost
compress: true,//服务端压缩是否开启
open: true,// 自动打开浏览器
hot: true ,// 开启热更新
port: 8888
}
}
最后放上代码文件地址 https://github.com/TKBnice/TKBnice-webpack4.0