大話webpack-完善功能

前言

在小編的上一篇博客分析之中咱們的webpack工具已經能夠幫咱們實現最基本的前端頁面需求，咱們本身搭建的webpack怎能這麼low呢，今天再來二次完善一下咱們的工具包，這篇分享是銜接上一篇文章的。

二次大話

---

完善搭建

1、靜態資源調用

在主頁中引入已有的靜態資源文件，咱們在public欄中放入js文件夾(用於存放已有的靜態資源文件)，index文件直接引入，那可不會容許你這樣。webpack：我都已經跟你把轉義和輸出都寫好了，你還本身引入文件，我纔不在幫你把外部文件再轉義好加進來了呢，太麻煩我了？那隻能再給他買上禮物(安裝插件)，安撫一下了。

該插件咱們實現將咱們的靜態資源目錄拷貝到咱們打包後的dist文件目錄下，打包後就直接調用。

npm install copy-webpack-plugin -D
複製代碼

一樣的引入以後咱們配置一下webpack.config.js文件

const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
    plugins: [
        new CopyWebpackPlugin([
            {
                from: 'public/js/*.js',
                to: path.resolve(__dirname, 'dist', 'js'),
                flatten: true, // 該參數設置拷貝時不會把整個文件目錄拷貝下來
            },
        ], {
            ignore: ['alone.js'] // 這邊是篩選參數，寫進去public下該文件不會被拷貝過去，能夠沒有需求能夠不設置
        })
    ]
}
複製代碼

2、抽離CSS文件並壓縮

咱們知道沒有抽離出來CSS文件打包，打包後樣式實現是最後的js文件去實現，這樣能夠分擔一下打包成的js文件的容量，一樣的抽離出來的CSS文件咱們也進行依稀壓縮，導入插件

npm install mini-css-extract-plugin -D
複製代碼

再次配置一下webpack.config.js文件

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'css/[name].css'
        })
    ],
    module: {
        rules: [
            {
                test: /\.(le|c)ss$/,
                use: [
                    MiniCssExtractPlugin.loader, //替換以前的 style-loader
                    'css-loader', {
                        loader: 'postcss-loader',
                        options: {
                            plugins: function () {
                                return [
                                    require('autoprefixer')({
                                        "overrideBrowserslist": [
                                            "defaults"
                                        ]
                                    })
                                ]
                            }
                        }
                    }, 'less-loader'
                ],
                exclude: /node_modules/
            }
        ]
    }
}
複製代碼

引入壓縮插件

npm install optimize-css-assets-webpack-plugin -D
複製代碼

而後配置引用一下該插件

//webpack.config.js
const OptimizeCssPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
    plugins: [
        // 這邊直接調用就行了不須要調配什麼參數
        new OptimizeCssPlugin()
    ],
}
複製代碼

3、熱更新

這是打包工具必備的一個功能，能讓咱們修改代碼保存之後自動更新，webpack插件中包含此功能對象咱們直接調用

//webpack.config.js
const webpack = require('webpack');
module.exports = {
    //....
    devServer: {
        hot: true
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin() //熱更新插件
    ]
}
複製代碼

4、多界面應用打包

到目前爲止頁面的功能已是基本完善，那麼多頁面webpack又是如何處理的呢？咱們直接定義多個入口文件實現多頁面打包，在配置頁面的時候咱們要加上chunks參數配置，要否則界面會將入口js文件都加載而沒辦法對應。

//webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: {
        index: './src/index.js',
        login: './src/login.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[hash:6].js'
    },
    //...
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html',
            filename: 'index.html', //打包後的文件名
            chunks: ['index']
        }),
        new HtmlWebpackPlugin({
            template: './public/login.html',
            filename: 'login.html', //打包後的文件名
            chunks: ['login']
        }),
    ]
}
複製代碼

---

總結

那麼到這裏基礎架構功能已經完成了，後續就是對於webpack的一些優化措施。