3 năm trước cách đây · fbef1ac6a4
--- a/09/.gitignore
+++ b/09/.gitignore
@@ -0,0 +1 @@
 
				+build/
			
--- a/09/src/css/a.css
+++ b/09/src/css/a.css
@@ -0,0 +1,5 @@
 
				+#box {

			
 
				+    width:200px;

			
 
				+    height:200px;

			
 
				+    background:red;

			
 
				+}
			
--- a/09/src/css/b.css
+++ b/09/src/css/b.css
@@ -0,0 +1,5 @@
 
				+#box1 {

			
 
				+    width:200px;

			
 
				+    height:200px;

			
 
				+    background:green;

			
 
				+}
			
--- a/09/src/index.html
+++ b/09/src/index.html
@@ -0,0 +1,13 @@
 
				+<!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>

			
 
				+    <div id="box"></div>

			
 
				+    <div id="box1"></div>

			
 
				+</body>

			
 
				+</html>
			
--- a/09/src/js/index.js
+++ b/09/src/js/index.js
@@ -0,0 +1,2 @@
 
				+import '../css/a.css'

			
 
				+import '../css/b.css'
			
--- a/09/webpack.config.js
+++ b/09/webpack.config.js
@@ -0,0 +1,41 @@
 
				+const {resolve} = require('path')

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

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

			
 
				+

			
 
				+module.exports = {

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

			
 
				+    output:{

			
 
				+        filename:'js/bulit.js',

			
 
				+        path: resolve(__dirname,'build')

			
 
				+    },

			
 
				+    module:{

			
 
				+        rules:[

			
 
				+            {

			
 
				+                test: /\.css$/,

			
 
				+                use: [

			
 
				+                    //取代style-loader,提取js中css成单独文件

			
 
				+                    MiniCssExtractPlugin.loader,

			
 
				+                    // 创建style标签，将样式放入

			
 
				+                    //'style-loader',

			
 
				+                    // 将css文件整合到js中

			
 
				+                    'css-loader'

			
 
				+                ]

			
 
				+            }

			
 
				+        ]

			
 
				+    },

			
 
				+    plugins:[

			
 
				+        new HtmlWebpackPlugin({

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

			
 
				+        }),

			
 
				+        new MiniCssExtractPlugin({

			
 
				+            filename:'css/built.css'   //重命名

			
 
				+        })

			
 
				+    ],

			
 
				+    mode:'development',

			
 
				+    devServer:{

			
 
				+        contentBase:resolve(__dirname,'build'),

			
 
				+        compress:true,

			
 
				+        port:3000,

			
 
				+        open:true

			
 
				+    }

			
 
				+}
			
--- a/10/.gitignore
+++ b/10/.gitignore
@@ -0,0 +1 @@
 
				+build/
			
--- a/10/src/css/a.css
+++ b/10/src/css/a.css
@@ -0,0 +1,7 @@
 
				+#box {

			
 
				+    width:200px;

			
 
				+    height:200px;

			
 
				+    background:red;

			
 
				+    display: flex;

			
 
				+    backface-visibility: hidden;

			
 
				+}
			
--- a/10/src/css/b.css
+++ b/10/src/css/b.css
@@ -0,0 +1,5 @@
 
				+#box1 {

			
 
				+    width:200px;

			
 
				+    height:200px;

			
 
				+    background:green;

			
 
				+}
			
--- a/10/src/index.html
+++ b/10/src/index.html
@@ -0,0 +1,13 @@
 
				+<!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>

			
 
				+    <div id="box"></div>

			
 
				+    <div id="box1"></div>

			
 
				+</body>

			
 
				+</html>
			
--- a/10/src/js/index.js
+++ b/10/src/js/index.js
@@ -0,0 +1,2 @@
 
				+import '../css/a.css'

			
 
				+import '../css/b.css'
			
--- a/10/webpack.config.js
+++ b/10/webpack.config.js
@@ -0,0 +1,79 @@
 
				+const {resolve} = require('path')

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

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

			
 
				+

			
 
				+//设置node环境变量

			
 
				+process.env.NODE_ENV = 'development'

			
 
				+

			
 
				+module.exports = {

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

			
 
				+    output:{

			
 
				+        filename:'js/bulit.js',

			
 
				+        path: resolve(__dirname,'build')

			
 
				+    },

			
 
				+    module:{

			
 
				+        rules:[

			
 
				+            {

			
 
				+                test: /\.css$/,

			
 
				+                use: [

			
 
				+                    //取代style-loader,提取js中css成单独文件

			
 
				+                    MiniCssExtractPlugin.loader,

			
 
				+                    // 创建style标签，将样式放入

			
 
				+                    //'style-loader',

			
 
				+                    // 将css文件整合到js中

			
 
				+                    'css-loader',

			
 
				+                    /**

			
 
				+                     * css 兼容性处理 postcss-loader postcss-preset-env

			
 
				+                     * "browserslist":{

			
 
				+                            "development":[

			
 
				+                                "last 1 chrome version",

			
 
				+                                "last 1 firefox version",

			
 
				+                                "last 1 safari version"

			
 
				+                            ],

			
 
				+                            "production":[

			
 
				+                                ">0.2%",

			
 
				+                                "not dead",

			
 
				+                                "not op_mini all"

			
 
				+                            ]

			
 
				+                        }

			
 
				+                     * 使用loader默认配置

			
 
				+                     * 'postcss-loader',

			
 
				+                     * 修改loader配置

			
 
				+                     */

			
 
				+                    {

			
 
				+                        loader: 'postcss-loader',

			
 
				+                        options: {

			
 
				+                             // 旧版本配置

			
 
				+                            /* ident: 'postcss', 

			
 
				+                            plugins: () => [

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

			
 
				+                            ] */

			
 
				+                            postcssOptions: {

			
 
				+                                plugins: [

			
 
				+                                  [

			
 
				+                                    'postcss-preset-env'

			
 
				+                                  ],

			
 
				+                                ],

			
 
				+                            }

			
 
				+                        }

			
 
				+                    }

			
 
				+                ]

			
 
				+            }

			
 
				+        ]

			
 
				+    },

			
 
				+    plugins:[

			
 
				+        new HtmlWebpackPlugin({

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

			
 
				+        }),

			
 
				+        new MiniCssExtractPlugin({

			
 
				+            filename:'css/built.css'   //重命名

			
 
				+        })

			
 
				+    ],

			
 
				+    mode:'development',

			
 
				+    devServer:{

			
 
				+        contentBase:resolve(__dirname,'build'),

			
 
				+        compress:true,

			
 
				+        port:3000,

			
 
				+        open:true

			
 
				+    }

			
 
				+}
			
--- a/11/.gitignore
+++ b/11/.gitignore
@@ -0,0 +1 @@
 
				+build/
			
--- a/11/src/css/a.css
+++ b/11/src/css/a.css
@@ -0,0 +1,7 @@
 
				+#box {

			
 
				+    width:200px;

			
 
				+    height:200px;

			
 
				+    background:red;

			
 
				+    display: flex;

			
 
				+    backface-visibility: hidden;

			
 
				+}
			
--- a/11/src/css/b.css
+++ b/11/src/css/b.css
@@ -0,0 +1,5 @@
 
				+#box1 {

			
 
				+    width:200px;

			
 
				+    height:200px;

			
 
				+    background:green;

			
 
				+}
			
--- a/11/src/index.html
+++ b/11/src/index.html
@@ -0,0 +1,13 @@
 
				+<!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>

			
 
				+    <div id="box"></div>

			
 
				+    <div id="box1"></div>

			
 
				+</body>

			
 
				+</html>
			
--- a/11/src/js/index.js
+++ b/11/src/js/index.js
@@ -0,0 +1,2 @@
 
				+import '../css/a.css'

			
 
				+import '../css/b.css'
			
--- a/11/webpack.config.js
+++ b/11/webpack.config.js
@@ -0,0 +1,65 @@
 
				+const {resolve} = require('path')

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

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

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

			
 
				+//设置node环境变量

			
 
				+process.env.NODE_ENV = 'development'

			
 
				+

			
 
				+//压缩css

			
 
				+//optimize-css-assets-webpack-plugin

			
 
				+

			
 
				+module.exports = {

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

			
 
				+    output:{

			
 
				+        filename:'js/bulit.js',

			
 
				+        path: resolve(__dirname,'build')

			
 
				+    },

			
 
				+    module:{

			
 
				+        rules:[

			
 
				+            {

			
 
				+                test: /\.css$/,

			
 
				+                use: [

			
 
				+                    //取代style-loader,提取js中css成单独文件

			
 
				+                    MiniCssExtractPlugin.loader,

			
 
				+                    // 创建style标签，将样式放入

			
 
				+                    //'style-loader',

			
 
				+                    // 将css文件整合到js中

			
 
				+                    'css-loader',

			
 
				+                    {

			
 
				+                        loader: 'postcss-loader',

			
 
				+                        options: {

			
 
				+                             // 旧版本配置

			
 
				+                            /* ident: 'postcss', 

			
 
				+                            plugins: () => [

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

			
 
				+                            ] */

			
 
				+                            postcssOptions: {

			
 
				+                                plugins: [

			
 
				+                                  [

			
 
				+                                    'postcss-preset-env'

			
 
				+                                  ],

			
 
				+                                ],

			
 
				+                            }

			
 
				+                        }

			
 
				+                    }

			
 
				+                ]

			
 
				+            }

			
 
				+        ]

			
 
				+    },

			
 
				+    plugins:[

			
 
				+        new HtmlWebpackPlugin({

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

			
 
				+        }),

			
 
				+        new MiniCssExtractPlugin({

			
 
				+            filename:'css/built.css'   //重命名

			
 
				+        }),

			
 
				+        new OptimizeCssAssetsWebpackPlugin()

			
 
				+    ],

			
 
				+    mode:'development',

			
 
				+    devServer:{

			
 
				+        contentBase:resolve(__dirname,'build'),

			
 
				+        compress:true,

			
 
				+        port:3000,

			
 
				+        open:true

			
 
				+    }

			
 
				+}
			
--- a/README.md
+++ b/README.md
@@ -10,6 +10,9 @@ npm start
 
				 * 06：打包其他资源

			
 
				 * 07：devServer

			
 
				 * 08：开发环境搭建

			
 
				+* 09：提取css

			
 
				+* 10：css兼容性处理  -- postcss-loader postcss-preset-env

			
 
				+* 11: 压缩css

			
 
				 

			
 
				 ## 关于

			
 
				 用于学习webpack配置，包括css、less、图片资源、其他资源、开发环境等配置。

			
--- a/package.json
+++ b/package.json
@@ -10,10 +10,26 @@
 
				     "http-server": "^0.12.3",
			
 
				     "less": "^4.1.1",
			
 
				     "less-loader": "^10.0.1",
			
 
				+    "mini-css-extract-plugin": "^2.2.0",
			
 
				+    "optimize-css-assets-webpack-plugin": "^6.0.1",
			
 
				+    "postcss-loader": "^6.1.1",
			
 
				+    "postcss-preset-env": "^6.7.0",
			
 
				     "style-loader": "^3.2.1",
			
 
				     "url-loader": "^4.1.1",
			
 
				     "webpack": "^5.48.0",
			
 
				     "webpack-cli": "^4.7.2",
			
 
				     "webpack-dev-server": "^3.11.2"
			
 
				+  },
			
 
				+  "browserslist": {
			
 
				+    "development": [
			
 
				+      "last 1 chrome version",
			
 
				+      "last 1 firefox version",
			
 
				+      "last 1 safari version"
			
 
				+    ],
			
 
				+    "production": [
			
 
				+      ">0.2%",
			
 
				+      "not dead",
			
 
				+      "not op_mini all"
			
 
				+    ]
			
 
				   }
			
 
				 }