-
Notifications
You must be signed in to change notification settings - Fork 1
/
webpack.config.js
104 lines (99 loc) · 5.13 KB
/
webpack.config.js
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
104
var path = require('path');
var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
var redBox = require('redbox-react');
var ExtractTextPlugin = require('extract-text-webpack-plugin'); //css单独打包
var HtmlWebpackPlugin = require('html-webpack-plugin'); //生成html
var plugins = [];
if (process.argv.indexOf('-p') > -1) { //生产环境
plugins.push(new webpack.DefinePlugin({ //编译成生产版本
'process.env': {
NODE_ENV: JSON.stringify('"production"')
}
}));
publicPath = '/my-cnode/public/assets/dist';
path = __dirname + '/my-cnode/public/assets/dist';
}
plugins.push(new ExtractTextPlugin('[name].css')); //css单独打包
plugins.push(new HtmlWebpackPlugin({ //根据模板插入css/js等生成最终HTML
filename: './public/index.html', //生成的html存放路径,相对于 path
template: './public/assets/template/index.html', //html模板路径
hash: true, //为静态资源生成hash值
}));
// 开启服务器后不能用相对路径
module.exports = {
// 通过webpack-dev-server配置的服务器,无法进行热加载,每次修改js都会让页面刷新,不利于开发
// webpack-dev-server --progress --hot
// devServer: {
// proxy: {
// "/api/*": {
// target: "https://cnodejs.org",//后台服务器所在的地址
// secure: false
// }
// },
// contentBase: "./public",//本地服务器所加载的index.html所在的目录
// colors: true,//终端中输出结果为彩色
// historyApiFallback: true,//不跳转
// port:3000,//dev-server所在的端口号
// open:true,//编译时自动打开浏览器到dev-server所在的地址
// inline: true,//实时刷新
// // hot: true // 在package.json的script里命令里配置比较好
// // 因为webpack-dev-server CLI(命令行Command Line Interface) 里面加入--hot
// // 就能自动添加HotModuleReplacementPlugin,同时将服务转化为热加载形式
// },
entry: {
"bundle": "./public/router.js"
},
//打包完成之后生成文件
output: {
path: __dirname + "/public/assets/dist",
filename: "[name].js",
chunkFilename: "[name].js"
},
//配置文件中添加source-map
devtool: "source-map",
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel'
},
{
test: /\.scss$/,
// exclude: [nodeModulesPath]用来排除不处理的目录
exclude: path.resolve(__dirname, 'public/assets/css'),
// webpack配置loader时是可以不写loader的后缀明-loader,因此css-loader可以写为css
// css-loader使你能够使用类似@import 和 url(...)的方法实现 require()的功能
// style-loader将所有的计算后的样式通过<style>标签的形式加入到dom的head中,二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中
// CSS的规则都是全局的,任何一个组件的样式规则,都对整个页面有效。
// 产生局部作用域的唯一方法,就是使用一个独一无二的class的名字,不会与其他选择器重名(或者在css中类名前面加:local())。这就是 CSS Modules 的做法。
// css-loader支持CSS Modules,在css-loader后面加了一个查询参数modules,表示打开 CSS Modules 功能
// 使用css-loader就可以支持css模块化,但此时css中的类名还是不能重复,必须加上参数modules,编译时就会自动将类名换成哈希值类型的类名,不担心重复了
// loader处理文件的加载顺序是从右到左,即先通过sass-loader将scss转成css,然后再用postcss预处理,添加上css3动画兼容性前缀等
// 然后在通过css-loader将css引入js文件,如果css-loader加了一个查询参数modules,则会将css中类名MD5化,使其变成唯一
// 最后通过styleloader将计算好的样式文件以style标签的形式加入到dom头部
loader: 'style!css?modules&localIdentName=[name]__[local]!sass?sourceMap=true'
},
{
test: /\.css$/,
include: path.resolve(__dirname, 'public/assets/css'),
loader: 'style!css'
},
{
test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
loader: 'url?limit=50000&name=[path][name].[ext]'
}
]
},
resolve: {
extensions: ['', '.js', '.jsx'],
// alias里面设置的文件跟node_modules里面的文件等价,直接通过文件名导入,webpack就能找到相应文件。
alias: {
//当import 'redBoxBlackStyle' 时,webpack就会自动找根文件夹下面的redBoxBlackStyle.js
redBoxBlackStyle: path.join(__dirname, 'redBoxBlackStyle.js')
}
},
plugins: plugins,
postcss: [autoprefixer]
};