Webpack4學習筆記

Gu_Yan發表於2019-01-28
Web筆記

一、基礎篇

1.全域性安裝和本地安裝的區別

  • 安裝位置不同

    全域性安裝：安裝在電腦的全域性環境中。注：可通過npm root -g檢視全域性安裝目錄

    本地安裝：安裝在當前專案中並且在當前專案中目錄下的package.json檔案中的devDependencies或者dependencies中記錄安裝包的版本資訊

  • 呼叫方式不同

    全域性安裝：全域性安裝後可以供命令列使用，開發者可以在命令列中直接執行該元件包支援的命令

    本地安裝：本地安裝後可以使用require、import等方式引入專案中的node_modules下的檔案

2.開發依賴於專案依賴的區別

  • 開發依賴：package.json檔案中devDependencies記錄的依賴；只用於開發環境，打包上線不需要，比如webpack、glup等這些工具都只是在開發階段需要，一旦專案投入真正的使用便不依賴這些外掛

  • 專案依賴：package.json檔案中dependencies記錄的依賴；專案投入真正使用的時候仍然需要依賴的外掛，比如react、react-dom、react-router-dom、jquery等，一旦dependencies中沒有這些外掛，專案投入使用的時候就會報錯

  • 注：npm 安裝的時候給我們提供的三種方式

    npm install packagename：將外掛安裝在專案中但不會在package.json檔案中寫入

    npm install packagename --save：將外掛安裝在專案中，並在package.json檔案的dependencies中記錄

    npm install packagename --save -dev：將外掛安裝在專案中，並在package.json檔案的devDependencies中記錄

3.使用webapck4需要安裝的模組

  • webpack webpack-cli

4.webpack預設配置的名字檔案的名字(兩種)

  • webpack.config.js webpackfile.js

5.webpack打包的結果為什麼可以在瀏覽器中執行

  • webapck使用commonJS規範，其在內部實現了一個require方法

6.webpack的模式（mode）及其作用

  • development：開發模式，可以看到打包後的結果，不會進行壓縮和優化操作
  • production：生產模式，會壓縮檔案進行優化

7.實現執行命令指令碼在package.json中的配置

<!--package.json-->
"script": {
    "dev": "webpack-server-dev",
    "build": "webpack"
}
複製程式碼

8.實現簡單的開發伺服器配置

<!--webpack.config.js-->
devServer: {
    port: 3000, // 埠號
    progress: true, // 進度條
    contentBase: './build', // 指定伺服器指向的資料夾
    compress: true, // 使用Gzip壓縮
    open: ture // 自動開啟瀏覽器
}
複製程式碼

9.實現壓縮產生的html檔案

使用html-webpack-plugin外掛 (npm i html-webpack-plugin --save -dev)

<!--webpack.config.js-->
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname,'build')
    },
    plugins:[
        new HtmlWebpackPlugin({
            template: './src/index.html', // 傳入模板的路徑
            filename: 'index.html', // 打包後的檔名
            minify:{ // 壓縮配置
                removeAttributeQuotes: true, // 刪除屬性的雙引號
                collapseWhitespace: true, // 摺疊空行
            }
        })
    ]
}
複製程式碼

10.解決打包後的快取問題

  • 配置hash: true
plugins:[
    new HtmlWebpackPlugin({
        template: './src/index.html',
        minify: {
            ...
        },
        hash: true //加入雜湊戳引入
    })
]
複製程式碼

11.webapck中loader的做什麼的

  • 用來載入處理各種形式的資源，用於對模組的原始碼進行轉換

12.css-loader&&style-loader的作用

  • css-loader：用於處理css檔案中的@import解析路徑，將css轉換為commonJS模組
  • style-loader：用於將處理好的css樣式插入到打包後的html檔案中，預設插到最後。若我們想通過我們寫的樣式覆蓋掉打包後的樣式，譬如我們的元件開發同學需要做如下配置
<!--webpack.config.js-->
module: {
    rules: [
        {
            test: /\.css$/,
            use: [
                {
                    loader: 'style-loader',
                    options: {
                        insertAt: 'top'
                    }
                }
            ]
        }
    ]
}
複製程式碼

13.loader的特點

  • 簡單，責任單一、鏈式，可以鏈式呼叫、保證輸出的結果是一個模組

14.loader有幾種寫法

  • 字串、陣列、物件

15.loader預設的執行順序

  • 從右到左，從下到上

16.使用loader如何傳遞引數

  • 通過options物件

17.常見的css前處理器及其對應的loader

  • less--->less-loader
  • sass--->sass-loader、node-sass
  • stylus--->stylus-loader

18.實現css樣式抽離

  • 通過mini-css-extract-plugin 外掛，並將style-loader替換為MiniCssExtractPlugin.loader
<!--webpack.config.js-->
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
plugins:[
    new MiniCssExtractPlugin({
        filename: 'main.css' // 抽離後的檔名
    })
],
module:{
    rules: [
        {
            test: /\.css$/,
            use: [
                {
                    loader: MiniCssExtractPlugin.loader
                }
            ]
        }
    ]
}
複製程式碼

19.實現抽離後的css樣式檔案壓縮

  • 使用optimize-css-assets-webpack-plugin
<!--webpack.config.js-->
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
    mode: 'development',
    optimization: {
        minimizer: [
            new OptimizeCssAssetsWebpackPlugin()
        ]
    }
}
複製程式碼

20.實現自動新增瀏覽器字首

  • 使用postcss-loader 配合 autoprefixer使用；需要有一個單獨的postcss.config.js檔案
<!--postcss.config.js-->
module.exports = {
    plugins: [require('autoprefixer')]
}

<!--webpack.config.js-->
module.exports = {
    mode: 'development',
    ertry: './src/index.js',
    output: {
        ...
    },
    optimization: {
        ...
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                ...,
                'postcss-loader'
                ]
            }
        ]
    }
}
複製程式碼

21.壓縮js檔案需要的外掛

  • uglifyjs-webpack-plugin 外掛
<!--webpack.config.js-->
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
    ...,
    optimization: {
        minimizer: [
            new UglifyjsWebpackPlugin({
                cache: true, //使用快取
                parallel: true, // 使用併發打包
                sourceMap: true // 使用原始碼對映
            })
        ]
    }
}
複製程式碼

相關文章