webpack 二次總結

前言：在6月份的時候寫了一個關於vue-cli的webpack探究，當時似懂非懂，現在回過頭來，感覺還是欠缺不少，這次看了技術胖的博客，感覺受益匪淺
技術胖博客

1:webpack介紹

webpack 模塊打包機
目的:分析你的目錄接口，找到JavaScript模塊以及其他一些瀏覽器不能直接運行的拓展語言，將其打包和轉換爲合適供瀏覽器使用的格式。webpack還有優化功能
打包：多個js文件打包爲一個文件

2：入口與出口文件

webpack.config.js 這是webpack的配置文件。

module.exports={
    entry:{}  //入口文件
    output:{} //出口文件
    module:{} //模塊，負責加載css，js等轉換壓縮
    plugins:[], //插件
    devServer:{} //負責服務器搭建
}

3：css打包

webpack是爲了把所有打包爲一個js，用來減少http請求數量。
這裏就要用到loaders配置
解析css 餘姚兩個包 style-loader,css-loader
style-loader:處理css中url
css-loder:處理插入css style的標籤
寫在webpack中的module中

module:{
    rules:[
        {
            test:/\.css$/,
            loader:['style-loader','css-loader']
        }
    ]
}

ps:寫法有多種，這是常見的一種

4:js代碼的壓縮

uglifyjs-webpack-plugin(JS壓縮插件，簡稱uglify)
在webpack.config.js中引入
const uglify = require(“uglifyjs-webpack-plugin”)
在module中的plugins也要new一個uglify對象

plugins:[
    new uglify()
]

由於開發環境和生產環境不同，在開發環境中對js是不進行壓縮的，所以一般在
webpack.config.js外還會有兩個js文件dev.js，pro.js分別使用不同的js配置

5：打包html文件

html-webpack-plugin
在webpack.config.js中引入它
const htmlPlugin = require(‘html-webpack-plugin’);
在plugins中進行引入配置

new htmlPlugin({
    minify:{
        removeAttributeQuotes:true
    },
    hash:true,
    template:'./src/index.html'

})

6:css中圖片處理

file-loader,url-loader
file-loader:解決引入路徑問題
url-loader:如果圖片過多會發出多個http請求，url-loader把圖片變成圖片編碼，生產dataURl
如果圖片較大，編碼會消耗性能。因此url-loader提供了一個limit參數，小於limit字節的文件會被轉爲DataURl，大於limit的還會使用file-loader進行copy

module:{
    rules:[
        {
            test:/\.(png|jpg|gif)/,
            use[{
                loader:'url-loader',
                options:{
                    limit:500000
                }
            }]
        }
    ]
}

7:css分離和圖片路徑處理

extract-text-webpack-plugin
引入
const extractTextPlugin = require(‘extract-text-webpack-plugin’);
同上還要在plugins裏面設置
new extractTextPlugin(‘…’);

module:{
        rules: [
            {
              test: /\.css$/,
              use: extractTextPlugin.extract({
                fallback: "style-loader",
                use: "css-loader"
              })
            },{
               test:/\.(png|jpg|gif)/ ,
               use:[{
                   loader:'url-loader',
                   options:{
                       limit:500000
                   }
               }]
            }
          ]
    },

雖然分離出css，但是css的路徑有很多問題，可以使用
publicPath解決，在output中設置publicPath
//出口文件的配置項

  output:{
        //輸出的路徑，用了Node語法
        path:path.resolve(__dirname,'dist'),
        //輸出的文件名稱
        filename:'[name].js',
        publicPath:website.publicPath
    },

8:處理html中的圖片

在HTML頁面中會使用img標籤，用webpack插件 html-withimg-loader解決
配置loader

{
    test: /\.(htm|html)$/i,
     use:[ 'html-withimg-loader'] 
}

9:css3 自動添加前綴

PostCSS插件
postcss.config.js在根目錄中
module.exports = {
plugins: [
require(‘autoprefixer’)
]
}
引入autoprefixer插件，自動添加前綴
然後在loader中配置

{
    test: /\.css$/,
    use: extractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
            { loader: 'css-loader', options: { importLoaders: 1 } },
            'postcss-loader'
        ]
    })

}

10：webpack中的babel

babel是什麼
babel是一個編譯js的平臺，轉義es6,es7，jsx的擴展語言
babel-core babel-loader babel-preset-es2015 babel-preset-react
這是babel的npm包
在webpack中配置babel方法

{
    test:/\.(jsx|js)$/,
    use:{
        loader:'babel-loader',
        options:{
            presets:[
                "es2015","react"
            ]
        }
    },
    exclude:/node_modules/
}

還要在根目錄下新建.babelrc文件，並且配置
{
“presets”:[“react”,”es2015”]
}

11:webpack打包之後的調試

Source Maps
配置
module.exports = {
devtool: ‘eval-source-map’,
entry: __dirname + “/app/main.js”,
output: {
path: __dirname + “/public”,
filename: “bundle.js”
}
}