3 年之前 · b3edc9ae87
--- a/21/build/css/built.032773d15b.css
+++ b/21/build/css/built.032773d15b.css
@@ -0,0 +1 @@
 
				+body,html{background:pink;height:100%;margin:0;padding:0}
			
--- a/21/build/css/built.0906d9abbf.css
+++ b/21/build/css/built.0906d9abbf.css
@@ -0,0 +1 @@
 
				+body,html{background:red;height:100%;margin:0;padding:0}
			
--- a/21/build/css/built.7d59fc1ca3.css
+++ b/21/build/css/built.7d59fc1ca3.css
@@ -0,0 +1 @@
 
				+body,html{background:red;height:100%;margin:0;padding:0}
			
--- a/21/build/index.html
+++ b/21/build/index.html
@@ -0,0 +1 @@
 
				+<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Document</title><script defer="defer" src="js/built.70bdd40df0.js"></script><link href="css/built.7d59fc1ca3.css" rel="stylesheet"></head><body><h1>hello chuck11222</h1></body></html>
			
--- a/21/build/js/built.032773d15b.js
+++ b/21/build/js/built.032773d15b.js
--- a/21/build/js/built.032773d15b.js.map
+++ b/21/build/js/built.032773d15b.js.map
--- a/21/build/js/built.0906d9abbf.js
+++ b/21/build/js/built.0906d9abbf.js
--- a/21/build/js/built.0906d9abbf.js.map
+++ b/21/build/js/built.0906d9abbf.js.map
--- a/21/build/js/built.70bdd40df0.js
+++ b/21/build/js/built.70bdd40df0.js
--- a/21/build/js/built.70bdd40df0.js.map
+++ b/21/build/js/built.70bdd40df0.js.map
--- a/21/build/media/1feff74faa.bin
+++ b/21/build/media/1feff74faa.bin
@@ -0,0 +1 @@
 
				+__webpack_public_path__ = __webpack_base_uri__ = htmlWebpackPluginPublicPath;
			
--- a/21/server.js
+++ b/21/server.js
@@ -0,0 +1,12 @@
 
				+/**

			
 
				+ * 启动 node server.js

			
 
				+ */

			
 
				+const express =  require('express')

			
 
				+

			
 
				+const app = express()

			
 
				+

			
 
				+app.use(express.static('build',{ cacheControl: true, setHeaders: function(res, path) { 

			
 
				+    res.setHeader("Cache-Control","max-age=3600");  

			
 
				+}}));

			
 
				+

			
 
				+app.listen(3000)
			
--- a/21/src/css/index.css
+++ b/21/src/css/index.css
@@ -0,0 +1,6 @@
 
				+html,body{

			
 
				+    margin:0;

			
 
				+    padding:0;

			
 
				+    height:100%;

			
 
				+    background:red;

			
 
				+}
			
--- a/21/src/index.html
+++ b/21/src/index.html
@@ -0,0 +1,12 @@
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <meta http-equiv="X-UA-Compatible" content="IE=edge">

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">

			
 
				+    <title>Document</title>

			
 
				+</head>

			
 
				+<body>

			
 
				+    <h1>hello chuck11222</h1>

			
 
				+</body>

			
 
				+</html>
			
--- a/21/src/js/index.js
+++ b/21/src/js/index.js
@@ -0,0 +1,7 @@
 
				+import '../css/index.css';
			
 
				+
			
 
				+function sum(...args) {
			
 
				+  return args.reduce((p, c) => p + c, 0);
			
 
				+}
			
 
				+
			
 
				+console.log(sum(1, 2, 3, 4, 5));
			
--- a/21/webpack.config.js
+++ b/21/webpack.config.js
@@ -0,0 +1,149 @@
 
				+const { resolve } = require("path");

			
 
				+//提取css

			
 
				+const MiniCssExtractPlugin = require('mini-css-extract-plugin');

			
 
				+//压缩css

			
 
				+const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')

			
 
				+//js语法检查

			
 
				+const EsLintPlugin = require('eslint-webpack-plugin')

			
 
				+//html资源处理

			
 
				+const HtmlWebpackPlugin = require('html-webpack-plugin')

			
 
				+//设置node环境变量 postcss-loader会根据它读取package.js里的browserslist配置

			
 
				+process.env.NODE_ENV = 'development'

			
 
				+

			
 
				+/**

			
 
				+ * 缓存：

			
 
				+ *  babel缓存

			
 
				+ *      cacheDirectory： true

			
 
				+ *      第二次打包速度更快

			
 
				+ *  文件资源缓存 -- 上线代码性能优化

			
 
				+ *      hash值: 全部文件名修改，而且每次打包都会改变。

			
 
				+ *      chunkhash：根据chunk生成hash值，当打包来源于同一个chunk，hash值会一样。所以js中引入css是一个chunk，都会变化。

			
 
				+ *      contenthash：内容不变时，hash不变，所以不同文件，hash值不一样。

			
 
				+ */

			
 
				+//复用loader

			
 
				+const commonCssLoader = [

			
 
				+    MiniCssExtractPlugin.loader, //提取css

			
 
				+    'css-loader',

			
 
				+    {

			
 
				+        loader: 'postcss-loader', //兼容性处理

			
 
				+        options: {

			
 
				+             // 旧版本配置

			
 
				+            /* ident: 'postcss', 

			
 
				+            plugins: () => [

			
 
				+                require('postcss-preset-env')()  //读取package.json里browserslist配置，默认加载根据node_env加载production

			
 
				+            ] */

			
 
				+            postcssOptions: {

			
 
				+                plugins: [

			
 
				+                  [

			
 
				+                    'postcss-preset-env'

			
 
				+                  ],

			
 
				+                ],

			
 
				+            }

			
 
				+        }

			
 
				+    }

			
 
				+]

			
 
				+

			
 
				+module.exports = {

			
 
				+    entry: './src/js/index.js',

			
 
				+    output: {

			
 
				+        filename: 'js/built.[contenthash:10].js',

			
 
				+        path: resolve(__dirname, 'build')

			
 
				+    },

			
 
				+    module:{

			
 
				+        rules:[{

			
 
				+            // 以下loader只会匹配一个 提高效率

			
 
				+            // 注意：不能有两个配置处理同一种文件

			
 
				+            oneOf:[

			
 
				+                {

			
 
				+                    test:/\.css$/,

			
 
				+                    use: [

			
 
				+                        ...commonCssLoader

			
 
				+                    ]

			
 
				+                },

			
 
				+                {

			
 
				+                    test:/\.less$/,

			
 
				+                    use:[

			
 
				+                        ...commonCssLoader,

			
 
				+                        'less-loader'

			
 
				+                    ]

			
 
				+                },

			
 
				+                {  //兼容性处理

			
 
				+                    test:/\.js$/,

			
 
				+                    exclude: /node_modules/,

			
 
				+                    loader: 'babel-loader',

			
 
				+                    options:{

			
 
				+                        // 预设：指示babel做怎样的兼容性处理

			
 
				+                        presets:[

			
 
				+                            [

			
 
				+                                '@babel/preset-env',

			
 
				+                                {

			
 
				+                                    useBuiltIns: 'usage',

			
 
				+                                    corejs:{

			
 
				+                                        version:3

			
 
				+                                    },

			
 
				+                                    targets:{

			
 
				+                                        chrome: '60',

			
 
				+                                        firefox: '60',

			
 
				+                                        ie:'9',

			
 
				+                                        safari: '10',

			
 
				+                                        edge: '17'

			
 
				+                                    }

			
 
				+                                }

			
 
				+                            ]

			
 
				+                        ],

			
 
				+                         //开启babel缓存

			
 
				+                         // 第二次构建时，会读取之前的缓存

			
 
				+                        cacheDirectory: true 

			
 
				+                    }

			
 
				+                },

			
 
				+                //处理图片

			
 
				+                {

			
 
				+                    test:/\.(jpg|png|jpeg|gif)/,

			
 
				+                    loader:'url-loader',

			
 
				+                    options:{

			
 
				+                        limit:8*1024,

			
 
				+                        name:'[hash:10].[ext]',

			
 
				+                        outputPath:'imgs',

			
 
				+                        esModule: false,

			
 
				+                    }

			
 
				+                },

			
 
				+                //html 处理

			
 
				+                {

			
 
				+                    test:/\.html$/,

			
 
				+                    loader:'html-loader'

			
 
				+                },

			
 
				+                //其他资源处理

			
 
				+                {

			
 
				+                    exclude:/\.(js|css|less|html|jpg|jpeg|png|gif)/,

			
 
				+                    loader:'file-loader',

			
 
				+                    options:{

			
 
				+                        outputPath:'media',

			
 
				+                        esModule: false,

			
 
				+                        name: '[hash:10].[ext]'

			
 
				+                    },

			
 
				+                    type: 'javascript/auto'

			
 
				+                }

			
 
				+            ]

			
 
				+        }]

			
 
				+    },

			
 
				+    plugins:[

			
 
				+        new MiniCssExtractPlugin({

			
 
				+            filename: 'css/built.[contenthash:10].css'

			
 
				+        }),

			
 
				+        new OptimizeCssAssetsWebpackPlugin(),

			
 
				+        new EsLintPlugin({

			
 
				+            extensions: ['js', 'json', 'coffee'],

			
 
				+            //exclude: '/node_modules/',

			
 
				+            fix:true

			
 
				+        }),

			
 
				+        new HtmlWebpackPlugin({

			
 
				+            template: './src/index.html',

			
 
				+            minify:{

			
 
				+                collapseWhitespace:true,

			
 
				+                removeComments:true

			
 
				+            }

			
 
				+        })

			
 
				+    ],

			
 
				+    mode:'production',

			
 
				+    devtool:'source-map'

			
 
				+}
			
--- a/README.md
+++ b/README.md
@@ -25,6 +25,7 @@ npx webpack serve
 
				 * 18：HMR:hot module replacement 热模块替换

			
 
				 * 19：source map 一种提供源代码到构建映射技术

			
 
				 * 20: oneOf 只会匹配一个loader 提高效率

			
 
				+* 21: 缓存

			
 
				 

			
 
				 ## 关于

			
 
				 用于学习webpack配置，包括css、less、图片资源、其他资源、开发环境等配置。
		`@@ -0,0 +1 @@`
		`+body,html{background:pink;height:100%;margin:0;padding:0}`
		`@@ -0,0 +1 @@`
		`+body,html{background:red;height:100%;margin:0;padding:0}`
		`@@ -0,0 +1 @@`
		`+__webpack_public_path__ = __webpack_base_uri__ = htmlWebpackPluginPublicPath;`