webpack.config.js

package.json

{
  "name": "wp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --mode production",
    "dev": "webpack-dev-server --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.4.4",
    "@babel/preset-env": "^7.4.4",
    "autoprefixer": "^9.5.1",
    "babel-loader": "^8.0.6",
    "clean-webpack-plugin": "^2.0.2",
    "css-loader": "^2.1.1",
    "cssnano": "^4.1.10",
    "file-loader": "^3.0.1",
    "glob-all": "^3.1.0",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "image-webpack-loader": "^4.6.0",
    "imagemin": "^6.1.0",
    "imagemin-gifsicle": "^6.0.1",
    "imagemin-mozjpeg": "^8.0.0",
    "imagemin-pngquant": "^7.0.0",
    "less": "^3.9.0",
    "less-loader": "^5.0.0",
    "mini-css-extract-plugin": "^0.6.0",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "postcss": "^7.0.16",
    "postcss-loader": "^3.0.0",
    "purify-css": "^1.2.5",
    "purifycss-webpack": "^0.7.0",
    "url-loader": "^1.1.2",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.2",
    "webpack-deep-scope-plugin": "^1.6.0",
    "webpack-dev-server": "^3.3.1"
  },
  "dependencies": {
    "jquery": "^3.4.1"
  }
}

webpack.config.js

const path = require('path'); //node自带path模块
const glob = require('glob-all'); //封装过的glob模块
const Webpack = require('webpack');
const PurifyCSSPlugin = require('purifycss-webpack'); //css抖动
const HtmlWebpackPlugin = require('html-webpack-plugin'); //html插件
const CleanWebpackPlugin = require('clean-webpack-plugin'); //清理dist插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); //抽离css插件
const WebpackDeepScopeAnalysisPlugin = require('webpack-deep-scope-plugin').default; //js深度抖动
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); //css压缩插件

module.exports = {
    entry: { //入口配置
        index: './src/index.js' //定义入口文件路径，名字为index
    },
    output: { //出口配置
        path: path.resolve(__dirname, 'dist'), //定义出口文件路径
        filename: '[name][hash:6].bundle.js' //名字为入口定义的文件名index，同时生成6位哈希值
    },
    mode: 'development', //开发模式
    module: { //loaders配置
        rules: [{
                test: /\.html$/, //html解析
                use: {
                    loader: 'html-loader',
                    options: {
                        attrs: ['img:src'] //抽离html文件中的图片
                    }
                }
            },
            {
                test: /\.less$/, //less的解析
                use: [
                    MiniCssExtractPlugin.loader, //抽离css
                    // 'style-loader',  //开发时只有使用style-loader才能实现style热更新
                    'css-loader', {
                        loader: 'postcss-loader', //使用postcss
                        options: {
                            ident: 'postcss',
                            plugins: [
                                require('autoprefixer')(), //使用postcss添加前缀插件
                            ]
                        }
                    }, 'less-loader' //首先将less解析为css,如果使用sass或stylus,可安装相应loader并将此处改为'sass-loader'或'stylus-loader'
                ]
            },
            {
                test: /\.css$/, //css解析
                use: [
                    MiniCssExtractPlugin.loader, //抽离css
                    // 'style-loader',  //开发时只有使用style-loader才能实现style热更新
                    'css-loader', {
                        loader: 'postcss-loader', //使用postcss
                        options: {
                            ident: 'postcss',
                            plugins: [
                                require('autoprefixer')(), //使用postcss添加前缀插件
                            ]
                        }
                    }
                ]
            },
            {
                test: /\.(eot|woff2?|ttf|svg)$/, //字体文件解析
                use: [{
                    loader: 'file-loader',
                    options: {
                        outputPath: 'fonts' //设置字体抽离路径
                    }
                }]
            },
            {
                test: /\.(gif|png|jpe?g|svg)$/, //图片解析
                use: [{
                    loader: 'url-loader', //根据图片大小选择是否抽离
                    options: {
                        limit: 10, //设定大于10KB抽离
                        outputPath: 'images' //设置抽离图片的路径
                    }
                }, {
                    loader: 'image-webpack-loader', //图片压缩
                    options: {
                        mozjpeg: { //jpeg格式图片压缩
                            progressive: true,
                            quality: 10 //压缩质量
                        },
                        optipng: { //不使用这个png压缩插件
                            enabled: false,
                        },
                        pngquant: { //png格式图片压缩
                            quality: '65-90', //压缩质量
                            speed: 4
                        },
                        gifsicle: { //gif格式图片压缩
                            interlaced: false,
                        }
                    }
                }]
            },
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                },
                exclude: /node_modules/
            }
        ]
    },
    plugins: [ //插件的配置
        new CleanWebpackPlugin({ //每次打包前清理dist文件夹
            cleanOnceBeforeBuildPatterns: ['**/*', '!mock.json*'], //将mock数据标记为不清理
        }),
        new HtmlWebpackPlugin({ //处理html
            chunks: ['index'],
            filename: 'index.html', //输出的文件名
            template: './index.html', //参照的模板
            minify: {
                removeComments: true, //去掉注释
                collapseWhitespace: true, //压缩
                collapseInlineTagWhitespace: true, //去掉行级元素的间隙
                removeAttributeQuotes: true //去掉引号
            }
        }),
        new PurifyCSSPlugin({ //css抖动
            paths: glob.sync([path.join(__dirname, './*.html'), path.join(__dirname, '.src/*.js')]), //将样式同指定定路径的html经进行对比
        }),
        new MiniCssExtractPlugin({ //抽离css
            filename: '[name][hash:6].css',
            chunkFilename: 'index.css'
        }),
        new OptimizeCssAssetsPlugin({ //css压缩
            assetNameRegExp: /\.css$/g,
            cssProcessor: require('cssnano')
        }),
        new Webpack.ProvidePlugin({ //自动获取依赖
            '$': 'jquery',
            'jQuery': 'jquery',
            'window.$': 'jquery',
            'window.jQuery': 'jquery'
        }),
        new WebpackDeepScopeAnalysisPlugin(), //深度抽离js,必须在css抖动之后
        new Webpack.HotModuleReplacementPlugin() //热更新插件
    ],
    devServer: { //开发服务器配置
        contentBase: path.join(__dirname, "dist"), //本地服务器根目录
        host: 'localhost', //配置服务器IP
        port: 9527, //本地服务器端口号
        compress: true, //启用gzip压缩
        hot: true //启用热更新
    }
}