webpack4学习笔记

最近开始学习使用webpack打包工具，由于之前都是使用vue自带的webpack脚手架，使用比较方便，也没有遇到什么问题，后边需要在一些jquery的项目中使用webpack，因此重头学习一下webpack，并记录遇到的问题。

首先通过webpack官网的快速开始进行学习，简单的demo按照教程，一步步下来并没有什么问题。后来将旧项目迁移，使用webpack，遇到了一些问题，记录如下：

（*以下设置均在webpack.config.js中完成）

 

合并打包压缩css：

使用“extract-text-webpack-plugin”，注意：该插件在webpack4.0以上会报错，需要 npm install extract-text-webpack-plugin@next   以下载兼容版本

 

引用静态文件：

项目中需要引用一下常规的静态文件，在根目录创建一个static的文件夹，使用“copy-webpack-plugin”，在plugins添加如下配置

new CopyWebpackPlugin([{
　　from: path.resolve(__dirname, 'static'),
　　to: path.resolve(__dirname, 'dist/static'),
　　ignore: ['.*'],
}])

　即可将该文件夹下的文件复制到dist之下

 

自定义入口html文件：

使用“html-webpack-plugin”，在plugins中配置如下代码中的template的参数

 

new HtmlWebpackPlugin({
        title: 'mobile',
        template:'./src/mobileContent.html',
        hash:true,
        filename:"mobileContent.html"
}),

　　

引用图片：

使用url-loader
（1）设置limit参数，可以使对应体积的图片使用base64编码进行加载；
（2）设置outputPath，设置图片输出路径；
（3）设置context和name，是由于在原img文件夹中有子文件夹，为使打包后的img文件夹仍然保持原结构，设置name时加上[path]，并且通过修改context来设置path的相对路径；
　　　　{
            test:/\.(png|jpg|jpeg|gif|svg)$/,
            use:[
                {
                    loader:"url-loader",
                    options:{
                        limit:1000,   //表示低于10000字节（10K）的图片会以 base64编码
                        outputPath:'img',
                        context:"src/img", //path的相对路径，该设置为保留img下的子文件夹
                        name:'[path][name].[ext]?[hash]'
                    }
                }
            ]
        },
（4）为打包HTML中img标签所引用的图片，需要使用“html-loader”，并在plugins中增加以下代码

{
　　test: /\.(html)$/,
　　use: {
　　　　loader: 'html-loader',
　　　　options: {
　　　　　　attrs: ['img:src','img:data-src','video:poster'],
　　　　}
　　}
　},
 
 （5）通过css引用图片和html引用图片后，可能会遇到图片路径问题，总是会有一方的图片引用失败，可以对css-loader进行设置，设置其publicPath属性。
{

     test: /\.css$/,

     use: ExtractTextPlugin.extract({

     　　fallback: "style-loader",

　　　　   use: "css-loader",

　　　　   publicPath:"../"

     })

}

 

引用字体文件：

使用file-loader插件，在plugins中做如下配置，将字体文件输出在fonts文件夹之下
　　　　 {
          test: /\.(woff|woff2|eot|ttf|otf)$/,
          use: [{
            loader:'file-loader',
            options:{
                outputPath:'fonts'
            }
            
          }]
        },

 

　　

多入口应用：

首先设置多个入口，针对pc页面和mobile页面的两个入口js进行设置；
entry: {
        mobile: ['./src/mobile.js',],
        pc: ['./src/pc.js'],
    },

对于html页面入口通过“html-webpack-plugin”实现，只需要在plugins中设置两次即可
new HtmlWebpackPlugin({
　　title: 'mobile',
　　template:'./src/mobileContent.html',
　　hash:true,
　　filename:"mobileContent.html",
}),
new HtmlWebpackPlugin({
　　title: 'pc',
　　template:'./src/pcContent.html',
　　hash:true,
　　filename:"pcContent.html",
}),