webpack.congfig.js
##var HtmlWebpackPlugin = require('html-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var OpenBrowserPlugin = require('open-browser-webpack-plugin');
module.exports = {
// 這是一個主文件包括其他模塊
entry: './src/main.js',
// 編譯的文件路徑
output: {
//`dist`文件夾
path: './dist',
// 文件 `build.js` 即 dist/build.js
filename: 'build.js'
},
module: {
// 一些特定的編譯規(guī)則
loaders: [
{
// 讓webpack去驗證文件是否是.js結(jié)尾將其轉(zhuǎn)換
test: /\.js$/,
// 通過babel轉(zhuǎn)換
loader: 'babel',
// 不用轉(zhuǎn)換的node_modules文件夾
exclude: /node_modules/
},
{
test: /\.vue$/,
loader: 'vue'
}
]
},
vue: {
loaders: {
js: 'babel'
}
},
plugins: [
new HtmlWebpackPlugin({
template:'./index.html',
filename: 'assets/index.html'
}),
new CleanWebpackPlugin('./dist'),
],
devServer: { //建立本地服務(wù)器
contentBase: "./",
port: 9200,
inline: true
},
}
命令列執(zhí)行webpack,輸出dist資料夾,雙擊資料夾打開,頁面顯示正確
命令列執(zhí)行webpack-dev-server,就沒有輸出dist資料夾,localhost存取的時候就報錯了,因為沒有js檔案存在
請問這是什麼原因?為什麼webpack-dev-server的時候沒有輸出資料夾?
webpack-dev-server不是輸出文件,只是給本地開發(fā)提供了一個的伺服器,方便開發(fā)而已,在打包的時候才會輸出文件的。 localhost存取的時候需要加上端口,就是你現(xiàn)在的配置的9200