webpack.congfig.js
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var OpenBrowserPlugin = require('open-browser-webpack-plugin');
module.exports = {
// 這是一個(gè)主文件包括其他模塊
entry: './src/main.js',
// 編譯的文件路徑
output: {
//`dist`文件夾
path: './dist',
// 文件 `build.js` 即 dist/build.js
filename: 'build.js'
},
module: {
// 一些特定的編譯規(guī)則
loaders: [
{
// 讓webpack去驗(yàn)證文件是否是.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
},
}
The command line executes webpack, outputs the dist folder, double-clicks the folder to open, and the page displays correctly
When the command line executes webpack-dev-server, there is no dist folder output. When accessing localhost, an error is reported because no js file exists
Is this what is the reason? Why is there no output folder when using webpack-dev-server?
webpack-dev-server will not output actual files, they are all in memory.
webpack-dev-server is not an output file. It just provides a server for local development to facilitate development. The file is output only during packaging. When accessing localhost, you need to add the port, which is 9200 in your current configuration