webpack從入門到精通----（四）css\js打包及格式化插件

將css 代碼以 link標籤方式 引入

1. 安裝插件
   yarn add mini-css-extract-plugin -D

專門抽離 css 樣式文件的插件

2. 在 webpack.config.js 文件中使用

let MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
    ...,
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'main.css' // 打包之後的css文件名
        })
    ],
    module: {
        rules: [
            {
                test: '/\.css$/',
                use: [
                    MiniCssExtractPlugin.loader,// 將解析完的css代碼生成文件，然後以link標籤的方式插入到html文檔中
                    'css-loader'
                ]
            },
            {
                test: '/\.less$/',
                use: [
                    MiniCssExtractPlugin.loader,// 將解析完的css代碼生成文件，然後以link標籤的方式插入到html文檔中
                    'css-loader', 
                    'less-loader'
                ]
            }
        ]
    }
}

自動在 css 中 加上各個瀏覽器的適配前綴

1. 安裝插件 和 loader
   yarn add postcss-loader autoprefixer -D
2. 配置 postcss-loader

在webpack.config.js同級創建文件postcss.config.js

module.exports = {
    plugins: [require('autoprefixer')]
}

3. 在 webpack.config.js 文件中使用

module: {
    rules: [
        {
            test: '/\.css$/',
            use: [
                MiniCssExtractPlugin.loader,// 將解析完的css代碼生成文件，然後以link標籤的方式插入到html文檔中
                'css-loader',
                'postcss-loader'
            ]
        },
        {
            test: '/\.less$/',
            use: [
                MiniCssExtractPlugin.loader,// 將解析完的css代碼生成文件，然後以link標籤的方式插入到html文檔中
                'css-loader',
                'postcss-loader',
                'less-loader'
            ]
        }
    ]
}

跟隨着教程走，結果還是沒有出現預期的結果，並沒有出現自動加上瀏覽器適配前綴。

格式化打包後的 css 文件

1. 安裝插件
   yarn add optimize-css-assets-webpack-plugin -D
2. 配置 webpack.config.js

let OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
    optimization: { // 優化項
        minimizer: [
            new OptimizeCssAssetsWebpackPlugin()
        ]
    },
    ...
}

• 發現 css 壓縮了，但是 js 文件並沒有被壓縮
• 所以使用了 optimize-css-assets-webpack-plugin 之後，還得使用uglifyjs-webpack-plugin 來格式化壓縮 js 文件

格式化打包後的 js 文件

1. 安裝插件
   yarn add uglifyjs-webpack-plugin -D
2. 使用插件(webpack.config.js)

optimization: { // 優化項
    minimizer: [
        new UglifyjsWbpackPlugin({
            cache: true, // 是否用緩存
            parallel: true, // 是否併發打包
            sourceMap: true // es6 -> es5 源碼映射 方便調試
        }),
        new OptimizeCssAssetsWebpackPlugin()
    ]
},

• 注意： 這裏再進行build時可能會產生報錯，由於js文件還沒有額外(babel)的處理，如果想看到效果的話，需要把所有requirejs的代碼都註釋掉。

最終源碼：

// webpack 是node 寫出來的 node的寫法來運行

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
let OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
let UglifyjsWbpackPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
    optimization: { // 優化項
        minimizer: [
            new UglifyjsWbpackPlugin({
                cache: true, // 是否用緩存
                parallel: true, // 是否併發打包
                sourceMap: true // es6 -> es5 源碼映射 方便調試
            }),
            new OptimizeCssAssetsWebpackPlugin()
        ]
    },
    mode: 'production', // 模式 默認兩種 production(會壓縮js文件) development
    entry: './src/index.js', //入口
    output: { // 出口
        filename: 'bundle.js', // 打包後的文件名 [hash:8] 只顯示8位的hash文件
        path: path.resolve(__dirname, 'build') // 路徑必須是一個絕對路徑
    },
    plugins: [ // 數組 放着所有的webpack插件
        new HtmlWebpackPlugin({
            template: './src/index.html', // 打包的模板路徑
            filename: 'index.html', // 打包之後的文件名
        }),
        new MiniCssExtractPlugin({
            filename: 'main.css', // 抽離的文件名
        })
    ],
    module: { // 模塊
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader, // 將解析完的css代碼生成文件，然後以link標籤的方式插入到html文檔中
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: [
                                require("autoprefixer") /*在這裏添加*/
                            ]
                        }
                    }

                ]
            },
            {
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader, // 將解析完的css代碼生成文件，然後以link標籤的方式插入到html文檔中
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: [
                                require("autoprefixer") /*在這裏添加*/
                            ]
                        }
                    },
                    'less-loader'
                ]
            }
        ]
    }
}