1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
| const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const isDev = process.env.NODE_ENV === 'development'; //判断是否是开发环境 cross-env中配置的变量都存在process.env中
const HTMLPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const config = {
target: "web",
entry: path.join(__dirname, 'src/index.js'), //入口文件
output: {
filename: "bundle.js", //输出文件名
path: path.join(__dirname, 'dist') //输出文件路径
},
module: {
rules: [
{
test: /\.vue$/,
loader: "vue-loader"
},
{
test: /\.css$/,
use: ['style-loader','css-loader']
},
{
test: /\.jsx$/,
loader: "babel-loader"
},
{
test: /\.styl$/,
use: [
'style-loader',
'css-loader',
{
loader: "postcss-loader",
options: {
sourceMap:true, //使用stylus-loader生成sourceMap
}
},
'stylus-loader' //处理.styl文件为css文件后返回给上级处理
]
},
{
test: /\.(gif|jpg|jpeg|png|svg)$/,
use: [
{
loader: "url-loader",
options: {
limit: 1024, //小于1024转换为base64直接放在js内容内
name:'[name].[ext]', //名字使用原来的文件名 ext为扩展名
}
}
]
}
]
},
plugins: [
// 添加VueLoaderPlugin，mode-loader
new VueLoaderPlugin(),
new webpack.DefinePlugin({
'process.env':{
NODE_ENV : isDev ? '"development"' : '"production"',
}
}),
new HTMLPlugin(),
],
};
/**
* 针对开发环境做以下配置
*/
if(isDev){
config.devtool= '#cheap-module-eval-source-map'; //在浏览器中调试查看es6代码
config.devServer = {
port: 8000,
host: '0.0.0.0',
overlay: {
error: true, //在网页上显示错误信息
},
open: false, //启动时自动打开浏览器
historyApiFallback: {}, //webpack未识别的路由重定向
//启动热加载
hot: true,
};
//热加载
config.plugins.push(
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
);
}
module.exports = config;
|