# 常用配置项
const path = require('path'); //
module.exports = {
// Chosen mode tells webpack to use its built-in optimizations accordingly.
mode: "production", // "production" | "development" | "none"
/*
webpack --mode=development
*/
// 这里应用程序开始执行webpack 开始打包
entry: "./app/entry",
// webpack 如何输出结果的相关选项
output: {
//所有输出文件的目标路径,必须是绝对路径(使用 Node.js 的 path 模块)
path:path.resolve(__dirname, "dist"),
filename: "[name].js", // entry chunk 的文件名模板
publicPath: "/assets/", // 输出解析文件的目录,url 相对于 HTML 页面
},
// 模块配置相关
module: {
rules: [// 模块规则(配置 loader、解析器等选项)
{
test: /\.jsx?$/,// 文件拓展名正则匹配项
include: [ath.resolve(__dirname, "app")],
exclude: [path.resolve(__dirname, "app/demo-files")],
loader: "babel-loader",
options: {
presets: ["es2015"]
},
]},
//设置模块如何被解析
resolve: {
modules: ["node_modules",path.resolve(__dirname, "app")],
extensions: [".js", ".json", ".jsx", ".css"],
// 使用的扩展名
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
// 性能评估/超出文件限制
performance: {
hints: "warning", // 枚举
maxAssetSize: 200000, // 整数类型(以字节为单位)
maxEntrypointSize: 400000, // 整数类型(以字节为单位)
assetFilter: function(assetFilename) { // 提供资源文件名的断言函数
return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
}
},
// 通过为浏览器调试工具提供极其详细的源映射的元信息来增强调试能力,
// 但会牺牲构建速度。
devtool: "source-map",
context: __dirname, //webpack 的主目录
// 构建目标
target: "web", // 枚举
// 引入外部库, 无需webpack打包处理
externals: {
mockjs: 'Mock',
echarts: 'echarts',
ueditor: 'UE'
}
devServer: {
proxy: { // proxy URLs to backend development server
'/api': 'http://localhost:3000'
},
static: path.join(__dirname, 'public'),
compress: true, // enable gzip compression
historyApiFallback: true, // true for index.html upon 404, object for multiple paths
hot: true, // hot module replacement. Depends on HotModuleReplacementPlugin
https: false, // true for self-signed, object for cert authority
noInfo: true, // only errors & warns on hot reload
// ...
},
// list of additional plugins
plugins: [
new webpack.DefinePlugin({
'process.env': env
}),
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false
}
},
sourceMap: config.build.productionSourceMap,
parallel: true
}),
// ...
],
context: path.resolve(__dirname, '../'),
optimization: {
chunkIds: "size",
moduleIds: "size",
mangleExports: "size",
minimize: true,
minimizer: [new CssMinimizer(), "..."],
splitChunks: { // 分块策略
cacheGroups: {
"my-name": {
// define groups of modules with specific
test: /\.sass$/,
type: "css/mini-extract",
}
},
fallbackCacheGroup: { /* Advanced (click to show) */ }
}
},
}