生产环境基本配置

16/webpack.config.js

@@ -0,0 +1,131 @@
+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'
+
+//复用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.js',
+        path: resolve(__dirname, 'build')
+    },
+    module:{
+        rule:[
+            {
+                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'
+                                }
+                            }
+                        ]
+                    ]
+                }
+            },
+            //处理图片
+            {
+                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.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'
+}

README.md

@@ -12,11 +12,12 @@ npm start
 * 08：开发环境搭建
 * 09：提取css
 * 10：css兼容性处理  -- postcss-loader postcss-preset-env
-* 11: 压缩css
+* 11：压缩css
 * 12：eslint语法检查
 * 13：eslint兼容性处理
 * 14：js压缩
-* 15: html压缩
+* 15：html压缩
+* 16：生产环境基本配置
 
 ## 关于
 用于学习webpack配置，包括css、less、图片资源、其他资源、开发环境等配置。