webpack生产环境的配置文件

webpack开发环境的配置文件 其中处理了css兼容各种浏览器，js的兼容ES6、ES7等语法，图片或其他文件资源的处理以及css，js等的压缩
1、 webpack.config.js 配置文件

/**
 * webpack配置文件
 * webpack.config.js
 */
//  node.js内置模块
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
const miniCssExtractPlugin = require('mini-css-extract-plugin')
const optimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')

//  将公共的loader抽离
const commonCssLoader = [
    //  引入抽离css成单独文件的loader
    miniCssExtractPlugin.loader,
    'css-loader',
    //  使用postcss-loader处理css的兼容性
    {
        //  postcss找到package.json中的 browserslist 里面的配置，通过配置加载指定的css兼容性样式
        //	具体参考下方的package.json
        loader: 'postcss-loader',
        options: {
            ident: 'postcss',
            plugins: () => [
                require('postcss-preset-env')()
            ]
        }
    }
]

module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: "js/built.js",
        path: path.resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [...commonCssLoader]
            },
            {
                test: /\.less$/,
                use: [...commonCssLoader,'less-loader']
            },
            /**
             *  正常来讲，一个文件只能被一个loader处理
             *  当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序
             *  先执行eslint 在执行babel
             */

            {
                //  js的语法检测
                //  在package.json中eslintConfig --> airbnb
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'eslint-loader',
                //  优先执行
                enforce: "pre",
                options: {
                    fix: true
                }
            },
            {
                //  兼容 ES6、ES7等新语法
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                options: {
                    presets: [
                        //  通过 @babel/preset-env 完成了基本的兼容性处理，但对于如Promise等无法转换
                        //  再通过 core-js 按需处理Promise等，从而实现全部兼容
                        [
                            '@babel/preset-env',
                            {
                                //  按需加载
                                useBuiltIns: 'usage',
                                //  使用的core-js的版本
                                corejs: {version: 3},
                                //  兼容的浏览器
                                targets: {
                                    chrome: '60',
                                    firefox: '50'
                                }
                            }
                        ]

                    ]
                }
            },
            {
                test: /\.(jpg|jpeg|gif|png)$/,
                loader: 'url-loader',
                options: {
                    limit: 8 * 1024,
                    name: '[hash:8].[ext]',
                    outputPath: 'images',
                    esModule: false
                }
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            {
                exclude: /\.(js|css|less|html|png|jpeg|gif|jpg)$/,
                loader: 'file-loader',
                options: {
                    outputPath: 'media'
                }
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            template: "./src/index.html",
            minify: {
                //  去除空格
                collapseWhitespace: true,
                //  去除注释
                removeComments: true
            }
        }),
        //  抽离css成单独文件
        new miniCssExtractPlugin({
            filename: 'css/built.css'
        }),
        //  压缩css
        new optimizeCssAssetsWebpackPlugin()
    ],
    mode: "production"

}

2、package.json文件，里面包含了下载的各种插件

{
  "name": "demo1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.10.2",
    "@babel/polyfill": "^7.10.1",
    "@babel/preset-env": "^7.10.2",
    "babel-loader": "^8.1.0",
    "core-js": "^3.6.5",
    "css-loader": "^3.5.3",
    "eslint": "^7.1.0",
    "eslint-config-airbnb-base": "^14.1.0",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-import": "^2.20.2",
    "file-loader": "^6.0.0",
    "html-loader": "^1.1.0",
    "html-webpack-plugin": "^4.3.0",
    "less-loader": "^6.1.0",
    "mini-css-extract-plugin": "^0.9.0",
    "mini-extract-plugin": "^1.4.3",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "postcss-loader": "^3.0.0",
    "postcss-preset-env": "^6.7.0",
    "style-loader": "^1.2.1",
    "url-loader": "^4.1.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0"
  },
  "browserslist": {
    "development": [
    	// 指兼容最近的chrome版本
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
    	//	指兼容98%的浏览器
      ">0.2%",
      //	不包括dead
      "not dead",
      "not op_mini all"
    ]
  },
  "eslintConfig": {
  	//	语法检测用到 airbnb 的格式
    "extends": "airbnb-base"
  }
}