historyApiFallback: true,
//主机名
host: devConfig.host,
//端口号
port: devConfig.port,
//配置反向代理解决跨域
proxy: devConfig.proxyTable,
//为你的代码进行压缩。加快开发流程和优化的作用
compress: true,
// 在浏览器上全屏显示编译的errors或warnings。
overlay: {
errors: true,
warnings: false
},
// 终端输出的只有初始启动信息。 webpack 的警告和错误是不输出到终端的
quiet: true
},
module: {
//处理模块的规则(可在此处使用不同的loader来处理模块！)
rules: [
//使用vue-loader处理以vue结尾的文件！
{
test: /.vue$/,
loader: "vue-loader",
options: devConfig.vueloaderConf
},
//使用vue-style-loader!css-loader!postcss-loader处理以css结尾的文件！
{
test: /.css$/,
use: [
"vue-style-loader",
{
loader: "css-loader",
options: {
sourceMap: true
}
},
{
loader: "postcss-loader",
options: {
sourceMap: true
}
}
] },
//使用vue-style-loader!css-loader!postcss-loader处理以less结尾的文件！
{
test: /.less$/,
use: [
"vue-style-loader",
{
loader: "css-loader",
options: {
sourceMap: true
}
},
{
loader: "less-loader",
options: {
sourceMap: true
}
},
{
loader: "postcss-loader",
options: {
sourceMap: true
}
}
] }
] },
plugins: [
//开启HMR(热替换功能,替换更新部分,不重载页面！)
new webpack.HotModuleReplacementPlugin(),
//显示模块相对路径
new webpack.NamedModulesPlugin(),
//编译出错时,该插件可跳过输出,确保输出资源不会包含错误!
// new webpack.NoEmitOnErrorsPlugin(),
//配置html入口信息
new HtmlWebpackPlugin({
title: "hello,xc-cli!",
filename: "index.html",
template: "index.html",
//js资源插入位置,true表示插入到body元素底部
inject: true
}),
//编译提示插件
new FriendlyErrorsPlugin({
//编译成功提示！
compilationSuccessInfo: {
messages: [
`Your application is running here: http://${devConfig.host}:${devConfig.port}`
] },
//编译出错！
onErrors: function(severity, errors) {
if (severity !== "error") {
return;
}
const error = errors[0];
const filename = error.file.split("!").pop();
//编译出错时,右下角弹出错误提示！
notifier.notify({
title: "xc-cli",
message: severity + ": " + error.name,
subtitle: filename || "",
icon: path.join(__dirname, "xc-cli.png")
});
}
})
]});
module.exports = devConf;
8.3 通过创建以上文件,并下载相应的依赖和创建项目入口,我们就可以通过npm run dev在本地开发vue项目啦！！！
