webpack

生产环境webpack.config.js 基本配置

webpack 的五个核心模块

1. entry ：入口，从那个文件开始打包
2. output： 出口，输出到那里去 （bundle 的资源）
3. loader： 处理非js或json 文件资源，（webpack 本身只处理js和json 文件，需要引用外部加载器）
4. plugins: 插件，能执行范围更广的任务（打包，压缩）
5. mode:模式 （development开发模式、production生产模式）

生产环境下的webpack.config.js 基本配置如下：

const HtmlWebpackPlugin = require('html-webpack-plugin')
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const { resolve } = require('path')

// 复用 loader ，使用ES6 语法，数组...剩余参数
const commonCssLoader = [

    MiniCssExtractPlugin.loader,  // 提取css为单独文件
    'css-loader',
    {
        // /************** (1)需要在package.json 中定义browserslist******/ 
        loader: 'postcss-loader',
        options: {
            idents: 'postcss-loader',
            plugins: () => [require('postcss-preset-env')()]
        }
    }
]

module.exports = {
    extry : './src/index.js',
    output: {
        filename: 'js/bulit.js',
        path: resolve(__dirname, 'build'),
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [...commonCssLoader]
            },
            {
                test: /\.less$/,
                use: [...commonCssLoader,'less-loader']
            },
            /**
             * 正常一个文件只能被一个loader处理，
             * 当一个文件需要被多个loader处理，那么一定要指定loader执行的顺序
             * 先执行eslint 再执行babel
             */
            
            // eslint 的处理
            { 
                // /******(2)在package.json 中 eslintConfig --> airbnb*******/
                test: /\.js$/,
                exclude: /node_modules/,
                // 先执行的属性pre
                enforce: 'pre',
                loader: 'eslint-loader',
                options: {
                    fix:true
                }
            },
            // Babel转换的 处理
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                options: {
                    presets: [
                        '@babel/preset-env',
                        {
                            useBuiltIns: 'usage',
                            corejs: {version:3},
                            targets: {
                                chrome: '60',
                                firefox: '50'
                            }
                        }
                    ]
                }
            },
            {
                test: /\.(jpg|png|gif)/,
                loader: 'url-loader',
                options: {
                    limit: 8*1024,
                    name: '[hash:10].[ext]',
                    outputPath: 'imgs',
                    // 关闭默认的ES６　的解析,用commonjs 的格式
                    esModule: false,
                }
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            // 其他文件的处理
            {
                exclude: /\.(js|css|less|html|jpg|png|gif|)/,
                loader:'file-loader',
                options: {
                    outputPath: 'media'
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            minify: {
                // 压缩处理，处理空格
                collapseWhitespace: true,
                // 处理 清除注释
                removeComments: true
            }
        }),
        new MiniCssExtractPlugin({
            filename: 'css/built.css'
        }),
        new OptimizeCssAssetsWebpackPlugin()

    ],
    // mode: 'development',  //开发环境
    mode: 'production' // 生产环境
}

在package.json 的配置代码

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^4.0.0",
    "html-loader": "^2.1.2",
    "html-webpack-plugin": "^4.0.0",
    "less": "^4.1.1",
    "less-loader": "^8.0.0",
    "mini-css-extract-plugin": "^2.1.0",
    "style-loader": "^3.1.0"
  },
  "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  },
  "eslintConfig": {
    "extends": "airbnb-base"
  }
}

（1）browserslist 配置

 "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  },
  

（2）eslintConfig 配置

"eslintConfig": {
    "extends": "airbnb-base"
  }