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
})
]
}