blog/webpack.dev.config.js at master · chenbstack/blog · GitHub

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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
var webpack = require('webpack');
var path = require('path');
var autoprefixer = require('autoprefixer');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var OpenBrowserPlugin = require('open-browser-webpack-plugin');

module.exports = {
    context: __dirname + "/src",
    entry: './js/root.js',
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                use: {
                    loader: 'babel-loader'
                }

            }, {
                test: /\.(png|jpe?g|gif|woff|woff2|ttf|svg)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 8192,
                        name: 'img/[name].[hash:8].[ext]'
                    }
                }
            }, {
                test: /\.global.css$/,
                exclude: [/node_modules/],
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        {
                            loader: "css-loader",
                            options: {
                                //css压缩
                                //minimize: true,
                            }
                        }, {
                            loader: "resolve-url-loader"
                        }, {
                            loader: "postcss-loader",
                            options: {
                                plugins: [//打包css自动添加浏览器前缀
                                    autoprefixer({
                                        browsers: [
                                            '> 1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9'
                                        ],
                                        remove: true
                                    })]
                            }
                        }
                    ]
                })
            },{
                test: /\.css$/,
                exclude: [
                    /node_modules/, /\.global.css$/
                ],
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        {
                            loader: "css-loader",
                            options: {
                                //importLoaders: 3,
                                //css模块化
                                modules: true,
                                //css压缩
                                //minimize: true,
                                //css class样式后面自动跟随base64代码防止class重复
                                localIdentName: "[local]_[hash:base64:8]"
                            }
                        }, {
                            loader: "resolve-url-loader"
                        }, {
                            loader: "postcss-loader",
                            options: {
                                plugins: [//打包css自动添加浏览器前缀
                                    autoprefixer({
                                        browsers: [
                                            '> 1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9'
                                        ],
                                        remove: true
                                    })]
                            }
                        }
                    ]
                })
            }, {
                //下面是 ant-design 样式专用配置文件
                test: /\.css$/,
                exclude: [/src/],
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: {
                        loader: "css-loader",
                        options: {
                            importLoaders: 1,
                            //minimize: true,
                        }
                    }
                })
            }
        ]
    },
    output: {
        path: __dirname + "/dist",
        filename: "bundle.js",
        publicPath: "/dist/"
    },
    resolve: {
        alias: {
            '~': path.resolve(__dirname, 'src')
        }
    },
    plugins: [
        new OpenBrowserPlugin({ url: 'http://localhost:8080' }),
        new ExtractTextPlugin("style.css"),
        //把引入的React切换到产品版本
        // new webpack.DefinePlugin({
        //     'process.env.NODE_ENV': '"production"'
        // }),
        //压缩插件UglifyJsPlugin
        //删除所有注释
        // new webpack.optimize.UglifyJsPlugin({
        //     minimize: true,
        //     output: {
        //         comments: false
        //     },
        //     compress: {
        //         warnings: false
        //     }
        // }),
        // new webpack.optimize.CommonsChunkPlugin({
        //     name: 'vendor',
        //     filename: "vendor.js",
        // })
    ]
}