webpack配置

webpack配置文件

生产配置

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
'use strict';
const path = require('path');
//html插件
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
//入口
entry:{
main:'./src/main.js'
},
output:{
//资源产出路径
path:path.join(__dirname,'dist'),
filename:'build.js'
},
module:{
loaders:[
{ //处理css
test:/\.css$/,
loader:'style-loader!css-loader!autoprefixer-loader'
},
{
test:/\.less$/,
loader:'style-loader!css-loader!autoprefixer-loader!less-loader'
},
{
//处理文件
test:/\.(jpg|png|svg|ttf|gif)$/,
loader:'url-loader',
options:{
limit:4096
}
},
//处理js
{
test:/\.js$/,
loader:'babel-loader',
//排除node_modules目录
exclude:/node_modules/,
//options就交给.babelrc文件来说明
},
//vue
{
test:/\.vue$/,
loader:'vue-loader'
},
//处理vue-preview中的ES6
{
test: /vue-preview.src.*?js$/,
loader: 'babel-loader'
}
]
},
plugins:[
new htmlWebpackPlugin({
template:'./src/index.html'
})
]
}

上线配置

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
94
95
96
97
98
99
100
101
102
103
use strict';
const path = require('path');
const fs = require('fs');
const version =JSON.parse(fs.readFileSync('./package.json','utf8')).version;
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const webpack = require('webpack');
console.log(version);
//html插件
const htmlWebpackPlugin = require('html-webpack-plugin');
//压缩js插件
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
//入口(也可以是多入口)
entry:{
main:'./src/main.js',
vendors:['vue','axios','vue-router','vue-preview','moment']
},
output:{
//资源产出路径
path:path.join(__dirname,'dist_production'),
publicPath:'/',//对应请求的资源不走相对路径,
//再公司中,最终就是加上http://www.xxx.com/
// filename:'build.js?v='+version
// filename:'js/[name].[chunkhash].js', // main.312321.js
//根据文件的不同,该标识会不一样,文件发生修改,该值也会不一样,
//文件的指纹(数字签名)
},
module:{
loaders:[
{ //处理css
test:/\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader?minimize=true!autoprefixer-loader"
})
},
{
test:/\.less$/,
loader:'style-loader!css-loader!autoprefixer-loader!less-loader'
},
{
//处理文件
test:/\.(jpg|png|svg|ttf|gif)$/,
loader:'url-loader',
options:{
limit:4096,
name:'assets/[name].[hash].[ext]'
}
},
//处理js
{
test:/\.js$/,
loader:'babel-loader',
//排除node_modules目录
exclude:/node_modules/,
//options就交给.babelrc文件来说明
},
//vue
{
test:/\.vue$/,
loader:'vue-loader'
},
//处理vue-preview中的ES6
{
test: /vue-preview.src.*?js$/,
loader: 'babel-loader'
}
]
},
plugins:[
new UglifyJSPlugin(),//压缩js
new ExtractTextPlugin("css/[name].[contenthash:6].css"),
//manifest会单独产出一个文件,关联着和main之间的关系
new webpack.optimize.CommonsChunkPlugin({
names:['vendors','manifest']
}),
new htmlWebpackPlugin({
template:'./src/index.html'
})
]
}
console.log(process.argv);
//做判断,究竟当前运行的是npm run build 还是run dev
if(process.argv.length === 2){
//生产环境
module.exports.output.filename = 'js/[name].[chunkhash].js'; // main.312321.js
//让vue知道是生产环境不输出日志
module.exports.plugins.push(new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}));
}else{ //参数个数为7
//开发环境
//webpack-dev-server启动的时候,没有真实的生成文件,chunkhash就用不了
module.exports.output.filename = 'js/[name].js';
}

package.json

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
{
"name": "cms_project_sh9",
"version": "1.0.3",
"description": "我们的项目",
"main": "index.js",
"scripts": {
"dev": "node_modules\\.bin\\webpack-dev-server --inline --hot --open --port 9999",
"build": "webpack",
"test": "ipconfig /all && node -v"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer-loader": "^3.2.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"css-loader": "^0.28.5",
"extract-text-webpack-plugin": "^2.1.2",
"file-loader": "^0.11.2",
"html-webpack-plugin": "^2.30.1",
"less": "^2.7.2",
"less-loader": "^4.0.5",
"style-loader": "^0.18.2",
"url-loader": "^0.5.9",
"vue-loader": "^13.0.4",
"vue-template-compiler": "^2.4.2",
"webpack": "^3.5.5",
"webpack-dev-server": "^2.7.1"
},
"dependencies": {
"axios": "^0.16.2",
"mint-ui": "^2.2.9",
"moment": "^2.18.1",
"vue": "^2.4.2",
"vue-preview": "^1.0.5",
"vue-router": "^2.7.0"
}
}