基于webpack 4静态资源打包压缩配置

• 需求：

       1. 实现静态资源js/css/less的打包、压缩；

       2. html文件加载对应的js/css/img文件；

• 配置：     工程github仓库地址

      工程目录结构如下：

        使用webpack4 涉及到的文件配置如下 ：

• package.json

{
  "name": "webpackproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "author": "jagger",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.2.0",
    "cssnano": "^4.1.10",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^4.2.0",
    "html-webpack-plugin": "^3.2.0",
    "html-withimg-loader": "^0.1.16",
    "less": "^3.10.3",
    "less-loader": "^5.0.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "style-loader": "^1.0.0",
    "url-loader": "^2.2.0",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0"
  }
}

• webpack.config.js 

const path = require ('path');
// html 打包插件
const htmlPlugin = require('html-webpack-plugin');
// css分离与图片路径处理插件
const extractTextPlugin = require('extract-text-webpack-plugin');
// css压缩优化
const optimizeCss = require('optimize-css-assets-webpack-plugin');

const { CleanWebpackPlugin } = require("clean-webpack-plugin");

var website = {
    publicPath:'./'
}
module.exports = {
    // 入口文件
    entry: {
        pageOne: path.join(__dirname,'./src/pageOne/js/pageOne.js'),
        pageTwo: path.join(__dirname,'./src/pageTwo/js/pageTwo.js')
    },
    // 输出文件
    output: {
        path: path.join(__dirname,'./build'),
        filename:'js/[name].[chunkhash].js',
        publicPath: website.publicPath
    },
    // 模式
    mode:'production',   //development   production
    module: {
        rules: [
            {
                test:/\.js?$/,
                loader:'babel-loader',
                //指定的js文件被babel处理
                include: [path.join(__dirname,'./src/pageOne/js/pageOne.js'),path.join(__dirname,'./src/pageTwo/js/pageTwo.js')],
                exclude: /node_modules/
            },
            {
                test:/\.css$/,
                use: extractTextPlugin.extract({
                    publicPath:'../',
                    fallback: {
                        loader: 'style-loader'
                    },
                    use: [{
                        loader: 'css-loader'
                    }]
                })
            },
            {
                test: /\.less$/,
                use: extractTextPlugin.extract({
                    publicPath:'../',
                    use:[{
                        loader: 'css-loader'
                    },{
                        loader: 'less-loader'
                    }],
                    fallback: 'style-loader'
                })
            },
            {//css中引入图片
                test: /\.(png|jpg|gif|gsp)/ ,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit:5000,//代表如果图片小于5000字节则会自动压缩成base64编码图片，否则复制文件到生产目录
                        name: '/[name].[hash].[ext]',
                        outputPath:'images/'
                    }
                }] 
            },
            {//html中引入图片
                test:/\.(htm|html)$/i,
                use: ['html-withimg-loader']
            }
        ]
    },
    plugins:[
        new CleanWebpackPlugin(), // 每次清除已生成
        new htmlPlugin({
            template: './src/pageOne/index.html',   //html模板
            filename: 'index.html',
            title: 'this is pageOne.html',
            //增加指定的chunks   加载对应js文件
            chunks:['pageOne']
         }),
        new htmlPlugin({
            template: './src/pageTwo/index.html',   //html模板
            filename: 'pageTwo.html',
            title: 'this is pageTwo.html',
            //增加指定的chunks   加载对应js文件
            chunks:['pageTwo']
         }),
        new extractTextPlugin({
            filename:(getPath)=>{
                return getPath('css/[name].[chunkhash].css')
            }
        }),
        new optimizeCss({
            assetNameRegExp:/\.css$/g,
            cssProcessor: require('cssnano'),
            cssProcessorPluginOptions:{
                preset:['default',{
                    discardComments:{removeAll: true}
                }]
            },
            canPrint: true
        })
    ],
    devServer:{
        contentBase:path.resolve(__dirname,'build'),
        host: '192.168.1.89',
        compress: true,
        hot: true,
        port: 8088
    }
}