|
|
@@ -0,0 +1,66 @@
|
|
|
+
|
|
|
+const {resolve} = require('path')
|
|
|
+const HtmlWebpackPlugin = require('html-webpack-plugin')
|
|
|
+
|
|
|
+/**
|
|
|
+ *
|
|
|
+ */
|
|
|
+module.exports = {
|
|
|
+ entry: './src/index.js',
|
|
|
+ output: {
|
|
|
+ filename:'[name].js',
|
|
|
+ path:resolve(__dirname,'build')
|
|
|
+ },
|
|
|
+ module:{
|
|
|
+ rules:[
|
|
|
+ {
|
|
|
+ test:/\.css$/,
|
|
|
+ use:['style-loader','css-loader']
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ plugins: [
|
|
|
+ new HtmlWebpackPlugin()
|
|
|
+ ],
|
|
|
+ mode: 'production',
|
|
|
+ /**
|
|
|
+ * 解析模块规则
|
|
|
+ */
|
|
|
+ resolve:{
|
|
|
+ //配置解析路径别名 缺点：编辑器无提示
|
|
|
+ alias:{
|
|
|
+ $css: resolve(__dirname,'src/css')
|
|
|
+ },
|
|
|
+ //配置省略文件路径的后缀名
|
|
|
+ extensions:[
|
|
|
+ '.js','.json','.css'
|
|
|
+ ],
|
|
|
+ //告诉webpack解析模块位置
|
|
|
+ modules:[
|
|
|
+ resolve(__dirname,'../node_modules'),'node_modules'
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ optimization:{
|
|
|
+ splitChunks:{
|
|
|
+ chunks:'all',
|
|
|
+ minSize: 30 * 1024, //分割的chunk最小位30kb
|
|
|
+ maxSize: 0,//最大沒有限制
|
|
|
+ minChunks: 1, //要提取的chunk最少被引用一次
|
|
|
+ maxAsyncRequests: 5, // 按需加載時并行加載文件的最大數量
|
|
|
+ maxInitialRequests: 3, // 入口js文件最大并行請求數量
|
|
|
+ autumaticNameDelimiter: '~', // 名稱連接符
|
|
|
+ name: true, // 可以使用命名規則
|
|
|
+ cacheGroups:{ //分割chunk的組
|
|
|
+ vendors:{
|
|
|
+ test:/[\\/]node_modules[\\/]/,
|
|
|
+ priority: -10
|
|
|
+ },
|
|
|
+ default:{
|
|
|
+ minChunks: 2,
|
|
|
+ priority: -20,
|
|
|
+ reuseExistingChunk:true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
