webpack從入門到精通----（二）熱重載及html插件

第三課

webpack-dev-server

1. 安裝
   yarn add webpack-dev-server -D
2. 啓動
   npx webpack-dev-server
3. 配置 webpack

module.exports = {
    devServer: { // 開發服務器的配置
        port: 3000, // 啓動端口
        progress: true, // 滾動條
        contentBase: './build', // 啓動服務的路徑
        compress: true, //壓縮
    },
    entry: './src/index.js', //入口
    ...
}

4. 修改 package.json文件

"script": {
    "dev": "webpack-dev-server"
}

webpack-plugin

1. 安裝插件
   yarn add html-webpack-plugin -D
2. 在webpack.config.js中引入和使用插件

let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    ...,
    plugins: [ // 數組 放着所有的webpack插件
        new HtmlWebpackPlugin({
            template: './src/index.html', // 打包的模板路徑
            filename: 'index.html', // 打包之後的文件名
            minify: { // 格式化html文件
                removeAttributeQuotes: true, // 去除掉雙引號
                collapseWhitespace: true // 變成1行
            },
            hash: true // 會在 js後面加上 [? + 哈希]
        })
    ],
    output: {
        ...,
        filename: 'index.[hash:8].js' // 這個地方也是在名字上加上哈希 後面的:8表示8位
    }
}

最終webpack.config.js

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    devServer: { // 開發服務器的配置
        port: 3000, // 啓動端口
        progress: true, // 滾動條
        contentBase: './build', // 啓動服務的路徑
        compress: true //壓縮
    },
    mode: 'development', // 模式 默認兩種 production(會壓縮js文件) development
    entry: './src/index.js', //入口
    output: { // 出口
        filename: 'bundle.[hash:8].js', // 打包後的文件名 [hash:8] 只顯示8位的hash文件
        path: path.resolve(__dirname, 'build') // 路徑必須是一個絕對路徑
    },
    plugins: [ // 數組 放着所有的webpack插件
        new HtmlWebpackPlugin({
            template: './src/index.html', // 打包的模板路徑
            filename: 'index.html', // 打包之後的文件名
            minify: {
                removeAttributeQuotes: true,
                collapseWhitespace: true
            },
            hash: true
        })
    ]
}