3 年之前 · c048dbee2d
--- a/34/build/index.html
+++ b/34/build/index.html
@@ -0,0 +1,9 @@
 
															+<!DOCTYPE html>
														
 
															+<html>
														
 
															+  <head>
														
 
															+    <meta charset="utf-8">
														
 
															+    <title>Webpack App</title>
														
 
															+  <meta name="viewport" content="width=device-width, initial-scale=1"><script defer src="main.js"></script></head>
														
 
															+  <body>
														
 
															+  </body>
														
 
															+</html>
														
--- a/34/build/main.js
+++ b/34/build/main.js
--- a/34/src/add.js
+++ b/34/src/add.js
@@ -0,0 +1,5 @@
 
															+function add(x,y){

														
 
															+    return x + y

														
 
															+}

														
 
															+

														
 
															+export default add
														
--- a/34/src/count.js
+++ b/34/src/count.js
@@ -0,0 +1,5 @@
 
															+function count(x,y){

														
 
															+    return x - y

														
 
															+}

														
 
															+

														
 
															+export default count
														
--- a/34/src/css/index.css
+++ b/34/src/css/index.css
@@ -0,0 +1,3 @@
 
															+body,html{

														
 
															+    background:red;

														
 
															+}
														
--- a/34/src/index.js
+++ b/34/src/index.js
@@ -0,0 +1,9 @@
 
															+import add from './add'

														
 
															+import count from './count'

														
 
															+import '$css/index'

														
 
															+

														
 
															+console.log('index.js')

														
 
															+

														
 
															+console.log(add(1,2))

														
 
															+

														
 
															+console.log(count(4,3))
														
--- a/34/webpack.config.js
+++ b/34/webpack.config.js
@@ -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

														
 
															+                }

														
 
															+            }

														
 
															+        }

														
 
															+    }

														
 
															+}