webpack基础配置

//webpack.config.js 文件
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')
process.env.NODE_ENV = 'production'
/*
 postcss会按照 package.json中 browserlist中的配置进行浏览器的版本的样式兼容
   "browserslist":{
   "development":[
   "last 1 chrome version",
   "last 1 firefox version",
   "last 1 safari version"
   ],
   "production":[
   ">0.2%",
   "not dead",
   "not op_mini all"
   ]
}
*/
module.exports = {
    entry: ['./src/index.js','./src/index.html']
    output: {
        filename: 'built.js',
        path: resolve(__dirname, 'built')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                //MiniCssExtractPlugin代替style-loader 作用：抽离js中的css成单独文件
                use: [MiniCssExtractPlugin.loader,
                    'css-loader',
                {
                    loader: 'postcss-loader', //解决css3样式兼容性问题的loader
                    options: {
                        ident: 'postcss',
                        plugins: () => [require('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"
                            ]
                        }
                    }
                }
            ]
            },
            {
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader, //抽离css样式文件
                    'css-loader',
                    'less-loader',
                    {
                        loader: 'postcss-loader', //解决css3样式兼容性问题的loader
                        options: {
                            ident: 'postcss',
                            plugins: () =>require('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"
                                ]
                            }
                        }
                    }
                ]
            },
            {
                test: /\.(png|jpg|tif)$/,
                loader: 'url-loader',
                options: {
                    limit: 8 * 1024,
                    esModule: false,
                    name: '[hash:10].[ext]'
                }
            }, {
                exclude: /\.(css|less|html|png|jpg|tif|js)$/,
                loader: 'file-loader',
                options: {
                    name: '[hash:10].[ext]'
                }
            },
            {
                //用来处理html中插入的图片
                test: /\.html$/,     //安装的包html-loader
                loader: 'html-loader',
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                options: {
                    presets: [[
                        '@babel/preset-env',
                        {
                            //按需加载
                            useBuiltIns: 'usage',
                            corejs: {
                                version: '3'
                            },
                            //指定兼容性具体做到哪个版本的浏览器
                            targets: {
                                chrome: '60',
                                firefox: '60',
                                ie: '9',
                                safari: '10',
                                edge: '17'
                            }

                        }
                    ]]
                }
            }
        ]
    },
    //插件使用
    plugins: [new HtmlWebpackPlugin({
        template: './src/index.html'
    }),
    new MiniCssExtractPlugin({
        //指定抽离css文件路径名称
        filename: 'css/built.css'
    }),
    new OptimizeCssAssetsWebpackPlugin()
    ],
    //用来构建自动化
    devServer: {
        contentBase: resolve(__dirname, 'built'),
        compress: true,//启动gzip压缩
        port: 8009,
        open: true,//自动打开浏览器
        hot: true,//  打开热模块(hot module replacement 简称：HDR)替换功能，
                  //就是一个模块发生变化只会重新打包这一个模块(而不是打包所有模块)
    },
    dev
    mode: 'development'
}

//package.json 文件
//如果出现错误可以参考所有的插件的版本号进行配置

var foo = 'bar';
{
  "name": "studywebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "webpack": "^4.41.6"
  },
  "devDependencies": {
    "@babel/core": "^7.12.13",
    "@babel/preset-env": "^7.12.13",
    "babel-loader": "^8.0.6",
    "core-js": "^3.8.3",
    "css-loader": "^5.0.1",
    "file-loader": "^6.2.0",
    "html-loader": "^1.3.2",
    "html-webpack-plugin": "^4.5.1",
    "less": "^4.1.1",
    "less-loader": "^5.0.0",
    "mini-css-extract-plugin": "^1.3.5",
    "optimize-css-assets-webpack-plugin": "^5.0.4",
    "postcss-loader": "^3.0.0",
    "postcss-preset-env": "^6.7.0",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.2"
  }
}