webpack熱載入等一些常用配置
阿新 • • 發佈:2019-01-30
1、檢視webpack打包檔案以及對應資訊
webpack --display-modules --display-reasons
2、webpack -p :會對檔案進行優化,壓縮等
3、webpack -d :對應配置檔案的devtool
4、webpack -w :就不需要每次一修改程式碼就去編譯,修改了程式碼直接
重新整理瀏覽器就行了
5、配置熱載入:
5.1 下載webpack-dev-server依賴
npm install -g webpack-dev-server --save-dev
5.2命令列執行命令,啟動伺服器8080埠
webpack-dev -server --inline --hot
6、dev、test、prod環境區分:
debug = process.env.NODE_ENV == 'production'
//然後webpack中對應debug,就可以針對不同環境配置
配置檔案:
var debug = process.env.NODE_ENV == 'production' ? false : true
module.exports = {
devtool:debug ? "sourcemap" : null,
entry:"./js/entry.js",
output:{
filename:"bundle.js"
},
module:{
loaders:[
{
test: /\.css$/,
loader: "style-loader!css-loader" //如果字尾是css,就是用style,css的loader來處理
},
{ //配置使用es6語法寫js
test:/\.js$/,
loader:"babel-loader",
exclude:/node_modules/ , //忽略掉這個資料夾下的
options: {
presets: ['es2015','stage-0'],
plugins: ['transform-runtime']
}
},{
//配置vue
test:/\.vue$/,
loader:'vue-loader'
}
]
},
plugins:debug ? [] :[
//外掛
new webpack.optimize.OccurrenceOrderPlugin(),
],
resolve:{
alias:{
'vue$':'vue/dist/vue.js'
}
}
}
7、兩個分析使用工具
7.1生成專案所有配置分析檔案並分析
webpack --profile --json > stats.json
開啟webpack提供的分析網站,然後選中stats.json
網址:http://webpack.github.io/analyse/
7.2選擇stats.json
網站:http://chrisbateman.github.io/webpack-visualizer/