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",
}),