從零學習搭建webpack工程（二）

傳送門： 從零學習搭建webpack工程(一)

4、打包html，以及html-webpack-plugin的詳細配置

一、安裝plugin npm install -D html-webpack-plugin

package.json中：

"devDependencies": {
   "clean-webpack-plugin": "^3.0.0",
   "html-webpack-plugin": "^3.2.0",
   "webpack": "^4.41.2",
   "webpack-cli": "^3.3.10"
 },
複製代碼

二、在webpack.config.js中引入

const HtmlWebpackPlugin = require('html-webpack-plugin')
複製代碼

三、在plugins中配置(我這裏配置的是兩個頁面index和list)

此處用到了兩個模板頁面，須要先在根目錄下新建兩個文件index.html和list.html

new HtmlWebpackPlugin({
           title: "webpack template",
           template: "./index.html",
           filename: "index/index.html"
       }),
       new HtmlWebpackPlugin({
           title: "webpack template",
           template: "./list.html",
           filename: "list/list.html",
           chunks: ['list']//引入的js
       })
複製代碼

四、執行命令 nom run dev,打包後的文件以下

五、關於html-webpack-plugin的詳細參數配置

new HtmlWebpackPlugin({
            title: "webpack template",//在html使用ejs語法時生效
            template: "./list.html",
            filename: "list/list.html",
            chunks: ['list'],//容許注入的js文件
            excludeChunks: ['index'],// 阻止注入某些js文件
            inject: "body",//（true | body）添加靜態資源在body底部 | head添加靜態資源在head  | false阻止添加靜態資源
            favicon: "",//值是一個路徑，在生成的html中生成一個favicon
            minify: false,//默認值是false，是否對生成的html進行壓縮
            hash: true,//默認值是false，清楚緩存， 添加一個hash值在包含的腳本和css中
            cache: true,//默認是true，內容變化時造成新的文件
            showErrors: true,// 默認是true,錯誤信息輸出到html文件中
            meta: {} //值是對象，設置元信息。
        })
複製代碼

5、配置webpack-dev-serve,進行熱更新

一、安裝webpack-dev-serve ,命令 npm install webpack-dev-serve -D

二、在webpack.config.js中配置devServer

三、devServe參數配置詳解

devServer: {
        contentBase: path.join(__dirname, "dist"),//項目的目錄
        host: "localhost",//ip
        port: 2020,//端口
        open: true,//自動打開瀏覽器
        hot: true,//開啓熱替換
        // useLocalIp: true,
        openPage: "index/index.html",
        compress: true,//gzip壓縮
        //header:{ }//設置響應頭，
        overlay: true,//編譯失敗，在瀏覽器顯示錯誤
        //stats: 'errors-only',//編譯時命令行打印的內容 可選值 'minimal', 'normal', 'verbose'
        proxy: {//跨域
            '/api': {
                target: '', // 目標接口的域名
                // secure: true,  // https 的時候 使用該參數
                changeOrigin: true,  // 是否跨域
                pathRewrite: {
                    '^/api': ''  // 重寫路徑
                }
            }
        }
    },
複製代碼

四、修改package.json 下的script

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --config webpack.config.js",
    "build": "webpack --config webpack.config.js"
  },
複製代碼

五、命令npm run dev 會啓動node服務，自動打開瀏覽器頁面

傳送門： 從零學習搭建webpack工程(一)