webpack3.X學習

webpack demo
//webpack.config.js
const path = require('path')
const uglify = require('uglifyjs-webpack-plugin') //引進壓縮插件
const htmlPlugin = require('html-webpack-plugin') //引進html打包插件
const extractTextPlugin = require('extract-text-webpack-plugin') //引進css分離插件
const glob = require('glob') //規則模塊，使用正則匹配獲取對應規則的文件
const PurifyCSSPlugin = require("purifycss-webpack") //引進消除無用css插件

let websit = {
    publicPath: "http://192.168.2.153:1111/"
}

module.exports = {
    entry: { //入口,當需要打包多個js文件時，就需要配置多個入口文件
        entry: './src/entry.js',
        entry2: './src/entry.js'
    },
    output: { //輸出
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js', //name為entry對象里屬性key來取輸出口文件名稱
        publicPath: websit.publicPath //配置公共路徑，這樣在打包html時，所有引用的文件（css\js）全部都會使用配置的公共路徑，就不會造成引用路徑地址不正確的問題
    },
    module: { //css,圖片轉換，壓縮都在這里配置   
        rules: [ //規則，數組形式，因為可以配置多個規則
            { //可以設定4個參數，test、use為必需，indude/exindude、query為可選
                test: /\.css$/, //打包css文件
                use: ['style-loader', 'css-loader', 'postcss-loader']
                //indude/exindude   是指手動配置哪些文件需要處理
                //query 
            },
            { //背景圖片打包
                test: /\.(jpg|png|gif)/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 5000, //圖片大于5000kb，轉換為64位編碼
                        outputPath: 'images/' //打包后輸出的位置
                    }
                }]
            },
            { //img標簽圖片插件，webpack不支持使用img標簽引入圖片，所以需要使用國人做的loader去配置
                test: /\.(htm|html)$/i,
                use: ["html-withimg-loader"]
            },
            { //打包并分離less
                test: /\.less$/,
                use: extractTextPlugin.extract({
                    use: [{
                        loader: "css-loader"
                    }, {
                        loader: "less-loader"
                    }],
                    fallback: "style-loader"
                })
            },
            { //打包并分離sass
                test: /\.scss$/,
                use: extractTextPlugin.extract({
                    use: [{
                        loader: "css-loader"
                    }, {
                        loader: "sass-loader"
                    }],
                    fallback: "style-loader"
                })
            },
            {   //babel轉化ES678和react的jsx文件
                test: /\.(jsx|js)$/,
                use: {
                    loader: 'babel-loader'
                },
                exclude: /node_modules/ //忽略，正則匹配該文件不參與轉化
            }
        ]
    },
    plugins: [ //插件
        new uglify() //js代碼壓縮
        new htmlPlugin({ //html文件打包
            minify: { //去除html文件引用地址中的""引號
                removeAttributeQuotes: true
            },
            hash: true, //為文件添加哈希值，防止因為緩存的原因導致，瀏覽器無法觸發刷新
            template: './src/index.html' //模版文件地址
        }),
        new PurifyCSSPlugin({ //消除沉余css插件
            paths: glob.sync(path.join(__dirname, 'src/*.html')) //使用glob.sync同步遍歷獲取對應規則文件
        })
    ],
    devServer: { //配置webpack開發服務
        contentBase: path.resolve(__dirname, 'dist'), //基本目錄結構，指啟動后服務器指向位置
        compress: true, //服務器壓縮服務
        host: '192.168.10.102',
        port: 888
    }
}
webpackServer：
  • 步驟：
  1. npm install webpack-dev-server --save-dev
  2. 通過package.json里的scripts添加"server": "webpack-dev-server"腳本進行啟動（因為我們是安裝在項目文件的node_modules里，并沒有添加到環境變量中，所以無法通過全局啟動）
css文件打包配置：
  • 步驟：
  1. npm install style-loader css-loader --save-dev
  2. 在webpack.config.js的module中進行設置
module模塊引入方式有三種:
    1.
        {
            test:/\.css$/,
            use:['style-loader', 'css-loader']
        }

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

    3.這種方式比較常用
        {
            test: /\.css$/,
            use:[{
                loader: "style-loader"
            },{
                loader: "css-loader"
            }]
        }
html文件打包配置
  • 步驟：
  1. npm install --save-dev html-webpack-plugin
  2. 在plugins中配置相關信息
  3. requeire('html-webpack-plugin')
圖片打包配置(只適用于背景圖片)
  • 步驟：
  1. npm install --save-dev url-loader
  2. 在module中進行配置

ps：有兩個圖片處理的模塊(file-loader、url-loader)，但只需要使用url-loader模塊就可以，因為它包含了file-loader的功能

img標簽圖片打包配置
  • 步驟：
  1. npm install --save-dev html-withimg-loader
  2. 在module中進行配置
css分離配置和publicPath
  • 步驟：
  1. npm install --save-dev extract-text-webpack-plugin
  2. requeire('extract-text-webpack-plugin')
  3. 需要更改三個地方：
let websit = {
    publicPath: "http://192.168.2.153:1111/"
}

output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
    publicPath: websit.publicPath //1.配置公共路徑，這樣在打包html時，所有引用的文件（css\js）全部都會使用配置的公共路徑，就不會造成引用路徑地址不正確的問題
}
module: {
        rules: [{
            test: /\.css$/,
            use: extractTextPlugin.extract({ //2.css分離模塊配置
                fallback: "style-loader",
                use: "css-loader"
            })
        }]
    },
    plugins: [
        new extractTextPlugin("/css/index.css") //3.分離后，講css放置在哪個文件夾中
    ]
less打包并分離
  • 步驟：
  1. npm install --save-dev less less-loader
  2. 在module中進行配置
sass打包并分離
  • 步驟：
  1. npm install --save-dev node-sass sass-loader
  2. 在module中進行配置
postcss自動添加前綴
  • 步驟：
  1. npm install --save-dev postcss-loader autoprefixer
  2. 在和webpack.config.js同級目錄下創建新文件postcss.config.js 
//postcss.config.js
module.exports = { //配置postcss插件
    plugins: [
        require('autoprefixer')
    ]
}
  1. 在module中進行配置

postcss配置詳細參數說明

消除沉余（未使用）css
  • 步驟：
  1. npm i -D purifycss-webpack purify-css
  2. require('glob') && require("purifycss-webpack")
  3. 在plugins中配置

ps：PurifyCSS（消除沉余css插件）必須配合extract-text-webpack-plugin（css分離插件）使用，否則會報錯

ES678和react（jsx）轉化工具
  • 步驟
  1. npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react
  2. 在webpack.config.js同級目錄下創建.babelrc文件
//.babelrc
{
    "presets": [
        "env",
        "react"
    ]
}
  1. 在module中進行配置
webpack打包后調試代碼
  • 在webpack.config.js添加devtool
    • 在配置devtool時，webpack給我們提供了四種選項。
      • source-map:在一個單獨文件中產生一個完整且功能完全的文件。這個文件具有最好的source map,但是它會減慢打包速度；
      • cheap-module-source-map:在一個單獨的文件中產生一個不帶列映射的map，不帶列映射提高了打包速度，但是也使得瀏覽器開發者工具只能對應到具體的行，不能對應到具體的列（符號）,會對調試造成不便。
      • eval-source-map:使用eval打包源文件模塊，在同一個文件中生產干凈的完整版的sourcemap，但是對打包后輸出的JS文件的執行具有性能和安全的隱患。在開發階段這是一個非常好的選項，在生產階段則一定要不開啟這個選項。
      • cheap-module-eval-source-map:這是在打包文件時最快的生產source map的方法，生產的 Source map 會和打包后的JavaScript文件同行顯示，沒有影射列，和eval-source-map選項具有相似的缺點。

四種打包模式，有上到下打包速度越來越快，不過同時也具有越來越多的負面作用，較快的打包速度的后果就是對執行和調試有一定的影響。

image.png

  • 如何調試
    image.png

    image.png

    啟動webpack server服務后打開控制臺
    image.png
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容