webpack

1.下载

cnpm install html-webpack-plugin -S

2.引入

var HtmlWebpackPlugin = require('html-webpack-plugin')

3.配置

plugins:[

new HtmlWebpackPlugin({})

]

4.参数说明

{
    //指定模板页面
    template:'./src/index.html',
    // 修改默认输出文件名
    filename:'xx.html'
    // 允许注入
    chunks:['xx'],
    // 不允许注入
    excludeChunks:[''],

}

5.多个

需要创建多个new HtmlWebpackPlugin

plugins:[
    new HtmlWebpackPlugin({
        template:'./src/index1.html',
    })
    new HtmlWebpackPlugin({
        template:'./src/index2.html',
    })
    new HtmlWebpackPlugin({。。})
    new HtmlWebpackPlugin({。。})
    ...
]

6.HTML中加入图片

a.加载图片的loader =>file-loader

npm install file-loader -S

b.html支持 图片的loader => html-withimg-loader

npm install html-withimg-loader -S

module:{
    rules:[{
        test:/\.(png|jpg|jpeg|gif)$/,
        use:[{
            loader:'file-loader',
            options:{
                esModule:false,
                outputPath:'img/'
            }
        }]
    },{
        test:/\.html$/,
        use:'html-withimg-loader'
    }]
}

HTML加入字体图标

{
    test:/\.(eot|svg|ttf|woff|woff2)$/,
    use:'file-loader?name=./fonts/[name].[ext]'
}

7.压缩打包css文件

1.单独抽离css文件

a.下载插件：mini-css-extract-plugin

cnpm install mini-css-extract-plugin -S

b.引入插件

var MiniCssExtractPlugin = require('mini-css-extract-plugin')

c.修改loader

{
    test:/\.css$/,
    use:[MiniCssExtractPlugin.loader,'css.loader']
}

d.使用插件

plugins:[
    // 分离css
   new MiniCssExtractPlugin({
    filename:'./css/[name].css'
   });
]

2.压缩css文件

插件：optimize-css-assets-webpack-plugin

a.引入插件

var OptimizecssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')

b.使用插件

plugins:[
    // 压缩css
    new OptimizecssAssetsWebpackPlugin()
]

项目打包

8.jquery报错问题

cnpm install jquery -S

var webpack = require('webpack')

plugins:[
    new webpack.ProvidePlugin({
        $:'jquery',
        jQuery:'jquery',
        'window.jQuery':'jquery'
    })
]