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: {
// 一些特定的编译规则
loaders: [
{
// 让webpack去验证文件是否是.js结尾将其转换
test: /\.js$/,
// 通过babel转换
loader: 'babel',
// 不用转换的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: { //建立本地服务器
contentBase: "./",
port: 9200,
inline: true
},
}
Laksanakan webpack pada baris arahan, keluarkan folder dist, klik dua kali folder untuk membuka dan halaman dipaparkan dengan betul
Apabila melaksanakan webpack-dev-server pada baris arahan, tiada output folder dist Apabila mengakses localhost, ralat dilaporkan kerana tiada fail js wujud
Apakah sebabnya? Mengapa tiada folder output apabila menggunakan webpack-dev-server?
webpack-dev-server tidak akan mengeluarkan fail sebenar, semuanya berada dalam ingatan.
Cuba kandunganBase: path.resolve(__dirname,"laluan anda")
webpack-dev-server bukan fail keluaran Ia hanya menyediakan pelayan untuk pembangunan tempatan untuk memudahkan pembangunan Fail hanya dikeluarkan semasa pembungkusan. Apabila mengakses localhost, anda perlu menambah port, iaitu 9200 dalam konfigurasi semasa anda