初識 webpack (二)

ouer1994發表於2020-01-01
Web

基於 webpack 4

1. ES6 語法解析

Babel 中文網: https://www.babeljs.cn/

npm i -D @babel/core @babel/preset-env babel-loader

兩種方式:

  1. 建立 .babelrc 檔案, 然後編寫 webpack 配置
  2. 直接在 webpack 配置中配置

方式一: 

# .babelrc 檔案內容
{
    "presets": [
        "@babel/preset-env"
    ]
}

# webpack.config.js 中
module: {
    rules: [
        {
            test: /\.js$/,
            use: [
                {
                    loader: 'babel-loader',
                }
            ]
        }
    ]
}

方式二:

# webpack.config.js 中
module: {
    rules: [
        {
            test: /\.js$/,
            use: [
                {
                    loader: 'babel-loader',
                    options: {
                        "presets": [
                            "@babel/preset-env"
                        ]
                    }
                }
            ]
        }
    ]
}

2. 解析 css, less 和 sass

# 解析 css
npm i -D css-loader style-loader

css-loader: 用於載入 .css 檔案, 並轉換為 commonJS 物件
style-loader: 用於將樣式通過 <style> 標籤插入到 head 頭中

# webpack.config.js[module.rules 中]
{
    test: /\.css/,
    use: ['style-loader', 'css-loader']
}
# 解析 less

npm i less less-loader -D

# webpack.config.js[module.rules 中]
{
    test: /\.less/,
    use: ['style-loader', 'css-loader', 'less-loader']
}
# 解析 sass

npm i sass-loader node-sass -D

# webpack.config.js[module.rules 中]
{
    test: /\.(scss|sass)/,
    use: ['style-loader', 'css-loader', 'sass-loader']
}

3. 解析 圖片 和 字型

有兩種 loader: file-loader 和 url-loader. url-loader 可以將小於某個值的圖片變為 base64

npm i -D file-loader

# webpack.config.js[module.rules 中]
{
    test: /\.(jpg|png|gif|jpeg)/,
    use: ['file-loader']
}
npm i -D url-loader

# webpack.config.js[module.rules 中]
{
    test: /\.(jpg|png|gif|jpeg)/,
    use: [
        {
            loader: 'url-loader',
            options: {
                limit: 10240
            }
        }
    ]
},

4. 檔案監聽

在原始碼發生變化時, 自動重新構建. 缺點: 需要手動重新整理瀏覽器

webpack 開啟監聽有兩種方式:

  1. webpack --watch
  2. 在配置 webpack.config.js 中 設定watch: true

5. 熱更新

優點: 不用手動重新整理瀏覽器

不會輸出檔案, 而是放在記憶體中

npm i -D webpack-dev-server

# webpack.config.js 中
devServer: {
    contentBase: './dist',
    hot: true
}

# 命令
webpack-dev-server --open

原理

初識 webpack (二)

6. 檔案指紋

css 檔案一般使用 contenthash, js 檔案一般使用 chunkhash

webpack 簡要

7. 提取 css 檔案

npm i -D mini-css-extract-plugin

# webpack.config.js[module.rules 中]
{
    test: /\.css/,
    use: [MiniCssExtractPlugin.loader, 'css-loader']
},

# webpack.config.js[plugins 中]
new MiniCssExtractPlugin({
    filename: '[name]_[contenthash:8].css'
})

8. 程式碼壓縮

型別 外掛 說明
js 壓縮 uglifyjs-webpack-plugin webpack 4 內建了此外掛, 所以不需要做額外的操作, mode 為 production 預設打包出來的 js 檔案就是壓縮的
css 壓縮 optimize-css-assets-webpack-plugin 需要同時使用 cssnano
html 壓縮 html-webpack-plugin minify 選項

8.1 css 壓縮

# webpack.config.js 中
const  OptimizeCssAssetsWebpackPlugin  =  require('optimize-css-assets-webpack-plugin');

# webpack.config.js [plugins 中]
new OptimizeCssAssetsWebpackPlugin({
    assetNameRegExp: /\.css$/,
    cssProcessor: require('cssnano')
})

8.2 html 壓縮

# webpack.config.js 中
const HtmlWebpackPlugin = require('html-webpack-plugin');

# webpack.config.js [plugins 中]
new HtmlWebpackPlugin({
    template: path.join(__dirname, 'src/search.html'),
    filename: 'search.html',
    chunks: ['search'],
    inject: true,
    minify: {
        html5: true,
        collapseWhitespace: true,
        preserveLineBreaks: false,
        minifyCSS: true,
        minifyJS: true,
        removeComments: false
    }
})
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章