ReactBlog/webpack.config.prod.js at master · BetaMee/ReactBlog · 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
var path = require('path');
var webpack = require('webpack');
var APP_PATH = path.resolve(__dirname, './client/App-Client.jsx');
var BUILD_PATH = path.resolve(__dirname, './server/public/assets');
var ExtractTextPlugin = require("extract-text-webpack-plugin");//将所有CSS文件打包
const autoprefixer = require('autoprefixer');

module.exports={
  entry:[
    APP_PATH
  ],

  output:{
    path: BUILD_PATH,
    filename: 'client.bundle.js',
    publicPath: '/assets/'
  },
  module:{
    rules:[
      {
        test:/\.(js|jsx)$/,
        exclude:/node_modules/,
        use: [
          'babel-loader',
        ]
      },

      {
        test:/\.css$/,
        use:ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: [
                  {
                    loader:'css-loader',
                    options:{
                      modules:true,//开启CSS Module
                      localIdentName:`[name]__[local]-[hash:base64:5]`
                    }
                  },

                  // {
                  //   loader:  'sass-loader',//处理sass和scss文件
                  // },

                  {
                    loader:  'postcss-loader',
                    options:{
                        plugins:function(){//这里配置postcss的插件
                          return [autoprefixer]
                        }
                    }
                  }
              ]
        })
      },
      {//处理图片
         test: /\.(png|jpg|gif|webp')$/,
        //  include:path.resolve(__dirname,'/client/assets'),
         use:[{
           loader:'url-loader',
           options:{
             limit:10000,
             //这个是输出的图片文件，跟output一致,生成的是bundleImg目录下的图片文件
             name:`bundleImg/[hash:8].[name].[ext]`,
           }
         }]
      },

      {//处理文字
         test: /\.(woff|ttf|svg|eot|woff2)$/,
        //  include:path.resolve(__dirname,'/client/assets'),
         use:[
           {
            loader:'url-loader',
              options:{
              limit:10000,
              name:'bundleFonts/[hash:8]-[name].[ext]'
           }
         }]
      },
    ]
  },

  plugins:[
    new webpack.DefinePlugin({
			'process.env': {
				NODE_ENV: JSON.stringify('production'),
				WEBPACK: true
			}
		}),
		new webpack.optimize.UglifyJsPlugin({
			compressor: {
				warnings: false
			}
		}),
    new ExtractTextPlugin('bundle.css'),
    new webpack.optimize.CommonsChunkPlugin({//拆分打包文件，出现共用文件则打包进common.js中
            name: "commons",
            filename: "commons.js",
            minChunks:2
    }),
		// new CopyWebpackPlugin([
		// 	{
		// 		from: path.resolve(__dirname, 'src', 'assets'),
		// 		to: path.resolve(__dirname, 'dist', 'assets')
		// 	}
		// ]),
  ]
}