之前的一份webpack3的配置檔案

let HtmlWebpackPlugin = require('html-webpack-plugin');// 引入插件
// webpack必須使用commonjs寫法，預設導出一個對象
module.exports = {
    // 入口檔案
    entry: './src/main.js',
    // 出口檔案
    output: {
        filename: 'bundle.js',  // 打包後的檔案名
        path: __dirname + '/dist'   // 打包路徑(必須是絕對路徑)
    },
    // 子產品解析規則
    module:{
        rules: [
            // 解析js檔案
            {
                test: /\.js$/,  // 正則比對需要解析的檔案
                use: 'babel-loader',
                exclude: /node_modules/ // 排除node_modules檔案夾
            },
            // 解析css檔案
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']// use從右往左寫
            },
            // 解析less
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            // 解析圖檔
            {
                test: /\.(jpg|png|gif)$/,
                use: 'url-loader?limit=8192'// url-loader會自動調用file-loader，limit限制轉成base64的圖檔大小
            }
        ]
    },
    // 插件
    plugins: [
        new HtmlWebpackPlugin({ // 在dist目錄下生成html檔案
            template: './src/index.html'    //模闆檔案
            // filename: 'xxx.html' //指定檔案名(預設為index.html)
        })
    ]
}

webpack4

webpack4需要安裝webpack和webpack-cli兩個依賴，其他的跟webpack3基本大同小異。

npm install webpack webpack-cli --save-dev

基本配置

開發過程中一般需要一個開發伺服器webpack-dev-server，自行npm install一下

webpack.config.js

const path = require('path');

module.exports = {
    mode: 'development',   //預設production 生産環境會将代碼壓縮
    //入口
    entry: './src/index.js',
    // 出口
    output: {
        filename: 'bundle.js',   //打包後檔案名
        path: path.resolve(__dirname, 'dist')   //打包後檔案所在路徑，必須是絕對路徑
    },
    // 開發伺服器webpack-dev-server配置
    devServer: {
        port: 3000,     //端口
        open: true,     //自動打開浏覽器
        progress: true,    //進度條
        //compress: true,
        contentBase: './dist',  //以哪個目錄開啟服務，預設是目前目錄
    }
}

package.json加入腳本指令

"scripts": {
    "build": "webpack --config webpack.config.js",
    "dev": "webpack-dev-server"
}

打包生成html檔案

需要使用html-webpack-plugin插件

npm install html-webpack-plugin --save-dev

webpack.config.js中先引入，再在配置中plugins項加入一些配置

const HtmlWebpackPlugin = require('html-webpack-plugin');   //打包生成html檔案插件
...
...
plugins: [
    // 打包生成html檔案，并且會自動将js檔案引入
    new HtmlWebpackPlugin({
        template: './src/index.html',   //html模闆檔案
        filename: 'index.html',      //打包後檔案名
        minify: {   //檔案壓縮
            collapseWhitespace: true    //折疊空格
        },
        hash: true      //引入檔案名加上hash值防止檔案緩存問題
    })
]

至此打包之後會生成html檔案，并且js、css檔案（loader配置好之後的）插入其中。

樣式處理

基本配置

webpack預設隻支援打包js檔案，其他檔案可能不太識别，這是就可以使用各種各樣的 loader 來解析其他檔案，比如css檔案：

解析css檔案至少需要 style-loader、css-loader兩個loader

npm install style-loader css-loader --save-dev

在webpack.config.js檔案中加入

module: {
    rules: [
        {
            test: /\.css$/,    //css檔案用css-loader解析,style-loader負責将css引入到html中
            use: ['style-loader', 'css-loader']    //注意順序問題
        }
    ]
}

上面寫法就完成了樣式的基本配置，預設會<head>裡的後面追加，也就是說自己直接在頁面上寫的樣式可能會被覆寫

webpack4簡單上手webpack4基本配置打包生成html檔案樣式處理處理圖檔watch實時打包babel

如果想在<head>裡的前面引入的話，可以用loader的對象寫法

{
    test: /\.css$/,    //css檔案用css-loader解析,style-loader負責将css引入到html中
    use: [
        {
        loader: 'style-loader',
        options: {
            insertAt: 'top'     //在<head>裡的前面移入css檔案
        }
        },
        'css-loader'
    ]
}

webpack4簡單上手webpack4基本配置打包生成html檔案樣式處理處理圖檔watch實時打包babel

配置less

打包less檔案需要less-loader，而less-loader還要依賴less核心包，是以需要下載下傳less、less-loader兩個開發依賴。如果需要配置sass則換成node-sass、sass-loader，相同的意思，配置也差不多。

npm install less less-loader --save-dev

然後在webpack.config.js中加入一個loader規則即可

{
    test: /\.less$/,    //打包less檔案
    use: ['style-loader', 'css-loader', 'less-loader']
}

樣式打包成單獨的css檔案

以上配置打包出來的樣式都是以link标簽形式引入html文檔中，如果我們需要将樣式單獨打包成一個css檔案的話還需要用到一個 mini-css-extract-plugin 插件

npm install mini-css-extract-plugin --save-dev

webpack插件一貫的使用套路，先引入然後在plugins中加入該插件執行個體

const MiniCssExtractPlugin = require('mini-css-extract-plugin');//單獨打包css檔案插件

//插件配置
plugins: [
    // 單獨打包css檔案
    new MiniCssExtractPlugin({
        filename: 'main.css'    //打包出來的css檔案名
    })
]

然後再修改之前配置的樣式loader，将style-loader改成 MiniCssExtractPlugin.loader即可

{
    test: /\.css$/,    //css檔案用css-loader解析,style-loader負責将css引入到html中
    use: [
        MiniCssExtractPlugin.loader,
        'css-loader'
    ]
},
{
    test: /\.less$/,    //打包less檔案
    use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
}

css樣式加浏覽器字尾

需要autoprefixer、postcss-loader兩個依賴

npm inastall autoprefixer postcss-loader --save-dev

loader用法很簡單，直接在之前的樣式打包配置中的 'css-loader' 後面插入 'postcss-loader'

{
    test: /\.css$/,    //css檔案用css-loader解析,style-loader負責将css引入到html中
    use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
        'postcss-loader'
    ]
},
{
    test: /\.less$/,    //打包less檔案
    use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader']
}

注意：使用postcss-loader還需要建立一個postcss.config.js檔案進行一些配置，如下：

module.exports = {
    plugins: [
        require('autoprefixer')    //使用autoprefixer插件
    ]
}

至此，一些需要添加浏覽器字首的樣式就會自動添加

打包出來的css檔案壓縮

需要使用optimize-css-assets-webpack-plugin插件，配置一些優化項

npm install optimize-css-assets-webpack-plugin --save-dev

webpack插件一貫的使用套路，先引入再執行個體化，這次要加入一個 optimization 優化項

const OptimizeCss = require('optimize-css-assets-webpack-plugin');//壓縮css檔案插件
...
...
// 優化項
optimization: {
    // 壓縮檔案
    minimizer: [
        new OptimizeCss()
    ]
}

注意：壓縮檔案要在生産環境下才生效，是以要将mode改成production，不過webpack預設就是production

mode: 'production',   //預設production 生産環境會将js代碼壓縮

至此打包出來的css檔案就是壓縮後的，但你會發現js檔案并沒有壓縮，這是因為使用了css壓縮插件後還要使用js壓縮插件uglifyjs-webpack-plugin才會進行js檔案壓縮。

npm install uglifyjs-webpack-plugin --save-dev

同樣使用webpack插件套路，先引入再執行個體化，然後在剛才的優化項上加入

const Uglifyjs = require('uglifyjs-webpack-plugin');//壓縮js檔案插件
...
...
// 優化項
optimization: {
    // 壓縮檔案
    minimizer: [
        new OptimizeCss(),      //壓縮css檔案
        new UglifyJsPlugin({    //壓縮js檔案
            cache: true,    //是否使用緩存
            parallel: true,    //并發打包，一起壓縮多個
            sourceMap: true    //源碼映射，便于調試
        })
    ]
}

至此js、css檔案就都可以打包壓縮了。

處理圖檔

需要 file-loader、url-loader 兩個loader

npm install file-loader url-loader --save-dev

在webpack.config.js中加入一個loader規則

//處理圖檔
{
    test: /\.(jpg|png|gif)$/,
    use: {
        loader: 'url-loader',   // url-loader會自動調用file-loader
        options: {
            limit: 8192,         //圖檔小于8k的就轉成base64
            outputPath: 'images/'//打包到images目錄下
        }
    }
}

watch實時打包

雖然平時一般都會用webpack-dev-server進行開發測試，但如果你想實時看到打包後的檔案的話，npm run build 打包之後檔案生成指令行就會停止，我們更改代碼後又要重新 npm run build 打包，如果我們想一直監控代碼變化自動進行實時打包可以加一個 watch 配置

//與plugins、module同級
watch: true,
watchOptions: {
    poll: 1000,     //每秒1000次
    aggregateTimeout: 500,      //防抖
    ignored: /node_modules/     //忽略
}

這裡主要說說熱更新

先在devServer選項中加入 hot: true

引入webpack const webpack = require('webpack');

在plugins選項中添加插件 new webpack.HotModuleReplacementPlugin()

最後再入口js檔案中加入

//熱更新
if(module.hot){
    module.hot.accept();
}

配置熱更新的文章

webpack.config.js檔案

const HtmlWebpackPlugin = require('html-webpack-plugin');                       //生成html檔案插件
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');        //獨立打包成css檔案插件

module.exports = {
    mode: 'development',    //預設production 生産環境會将代碼壓縮
    //入口檔案
    entry: './src/main.js',
    //出口檔案
    output: {
        filename: 'bundle.js',      //打包後檔案
        path: __dirname + '/dist'   //打包路徑，絕對路徑
    },
    //開發服務webpack-dev-server
    devServer: {        
        compress: true,         //伺服器壓縮
        host: 'localhost',
        port: 3000,
        open: true,
        hot: true               //熱更新
    },
    //插件
    plugins: [
        //熱更新
        new webpack.HotModuleReplacementPlugin(),
        //打包前先清空目錄，非必須
        // new CleanWebpackPlugin(['./dist']),
        //打包目錄下生成html檔案
        new HtmlWebpackPlugin({
            template: './src/index.html',        //模闆檔案
            minify: {
                collapseWhitespace: true        //折疊空格
            }
        }),
        //獨立打包成css檔案
        new ExtractTextWebpackPlugin({
            filename: 'css/index.css',
            disable: true           //開發環境下禁用，為了樣式熱更新
        })
    ],
    //加載器
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ExtractTextWebpackPlugin.extract({
                    fallback: 'style-loader',       //開發環境下，為了樣式熱更新
                    use: ['css-loader']
                })
            },
            {
                test: /\.less$/,
                use: ExtractTextWebpackPlugin.extract({
                    fallback: 'style-loader',       //開發環境下，為了樣式熱更新
                    use: ['css-loader', 'less-loader']
                })
            }
        ]
    },
}

babel

如果項目中用到es6文法，那麼還需要配置一下babel，在項目根目錄建立 .babelrc 檔案

webpack4簡單上手webpack4基本配置打包生成html檔案樣式處理處理圖檔watch實時打包babel

上面提到的babel依賴包第一套可以了解為文法轉換器，第二套可以了解為文法轉換的标準規範，二者缺一不可。

注意：babel7.0之後，包名更新為 @babel/core、@babel/preset-env、@babel/plugin-transform-runtime 等如此。

npm install babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime --save-dev

webpack.config.js中加入一個loader規則

{
   test: /\.js$/,      //js檔案babel處理
   use: ['babel-loader'],
   include: path.resolve(__dirname, 'src'),//src目錄下的js檔案需要被loader 處理
   exclude: /node_modules/
}

.babelrc

{
    "presets": [
        "@babel/preset-env"
    ],
    "plugins": [
        "@babel/plugin-transform-runtime"
    ]
}

webpack4簡單上手webpack4基本配置打包生成html檔案樣式處理處理圖檔watch實時打包babel

webpack4

基本配置

打包生成html檔案

樣式處理

基本配置

配置less

樣式打包成單獨的css檔案

css樣式加浏覽器字尾

打包出來的css檔案壓縮

處理圖檔

watch實時打包

babel

繼續閱讀

使用extract-text-webpack-plugin插件後報錯

CSS樣式抽離之 extract-text-webpack-plugin 插件

webpack, js 相容性處理

Vue項目 - 項目檔案介紹

vue3.0搭建，從零開始搭建vue3.0腳手架插件分布情況（最新版）

20分鐘gulp快速入門

NODE_ENV不是内部或外部指令,也不是可運作的程式

你配置Webpack 4的方式可能是錯的！

本月推薦：15 個有用的 JavaScript 和 CSS 庫

使用Travis-CI 與 Github Webhook自動部署你的頁面

項目中遇到的問題1-10

demo06 webpack + babel7 + typescript

測試工程師面試解析～

Vue - 安裝Node.js（配置環境變量、配置NPM下載下傳存放目錄、NPM設定鏡像倉庫）

Vue項目 - 單檔案元件和Vue中的路由

vue-cli簡介（中文翻譯）