3- webpack , html-webpack-plugin 插件

webpack-dev-server啓動服務

通過localhost方式來啓動項目 避免直接點擊html文件
npm install webpack-dev-server --save -D
然後 輸入 npx webpack-dev-server即可啓動服務
或者在package.json文件中scripts標籤配置"dev":“webpack-dev-server”
通過npm run dev 訪問， 下面devServer的配置是啓動服務時的參數

配置開發服務器 devServer

devServer:{  //開發服務器
      port:3000, //指定端口號
      progress:true,//顯示進度條
      contentBase:'./dist',//執行默認訪問路徑
      open:true,//自動打開瀏覽器
    },

注意：

npm run dev 其實也是將文件打包了 但是在dist文件夾下並看不到
因爲這個打包後的index.html文件在內存中,
當先執行npm run dev時通過訪問localhost:8080 會默認訪問根目錄下的
index.html 文件, 若跟目錄下沒有index.html文件就會將當前項目目錄展示
在網頁上。
但是我們希望訪問localhost:8080時 訪問的dist文件夾下的文件，所以要在
webpack.config.js中配置 devServer(開發服務器),同理有無index.html文件
時看到的結果和上面一樣,
注意：由於在webpack.config.js中配置的訪問路徑是contentBase:’./dist’，所以
只有先通過npm run build之後纔會生成dist文件夾，不然直接npm run dev訪問時會報
Cannot GET /，但是在實際開發中 我們並不是先build再dev的，所以這時候就用到了html
插件-> html-webpack-plugin

安裝

npm install html-webpack-plugin --save -D

使用 html-webpack-plugin 插件會將打包後的js文件插入到html文件裏，並且放入到dist文件夾下
需要在webpack.config.js中配置 plugin插件
配置之後執行npm run dev 在訪問時就不會報錯了 ，雖然控制檯顯示生產了打包文件 但是在項目中看不到
因爲在內存中

let path=require('path')
let htmlWebpackPlugin=require('html-webpack-plugin')

module.exports={
    mode:'development',
    entry:'./src/index.js',
    output:{
        filename:'bundle.js',// bundle.[hash:8].js //文件名添加hash戳 :8 顯示8位
        path:path.resolve(__dirname,'dist'),
    },
    devServer:{ 
      port:3000, 
      progress:true,
      contentBase:'./dist',
    },
    plugins:[ // 插件 數組 放所有webpack插件
        new htmlWebpackPlugin({
            template:'./src/index.html',//指定模板
            filename:'index.html',//打包後的文件名 默認也是index.html
            minify:{//壓縮
                removeAttributeQuotes:true,//去除html頁面中的雙引號
                collapseWhitespace:true//顯示在一行上
            },
            hash:true,//添加hash 是在index.html頁面裏面引入js時候給js添加hash 並不是index.html文件                       名添加hash
        })


    ]
}