commonComponents/webpack.deploy.config.js at master · emmmpro/commonComponents · 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
141
142
143
144
145
146
147
148
149
150
151
152
/**
 *　　　　　　　　┏┓　　　┏┓+ +
 *　　　　　　　┏┛┻━━━┛┻┓ + +
 *　　　　　　　┃　　　　　　　┃
 *　　　　　　　┃　　　━　　　┃ ++ + + +
 *　　　　　　 ████━████  +
 *　　　　　　　┃　　　　　　　┃ +
 *　　　　　　　┃　　　┻　　　┃
 *　　　　　　　┃　　　　　　　┃ + +
 *　　　　　　　┗━┓　　　┏━┛
 *　　　　　　　　　┃　　　┃ + + + +
 *　　　　　　　　　┃　　　┃ + 　　　　神兽保佑,代码无bug
 *　　　　　　　　　┃　　　┃　　+
 *　　　　　　　　　┃　 　　┗━━━┓ + +
 *　　　　　　　　　┃ 　　　　　　　┣┓
 *　　　　　　　　　┃ 　　　　　　　┏┛
 *　　　　　　　　　┗┓┓┏━┳┓┏┛ + + + +
 *　　　　　　　　　　┃┫┫　┃┫┫
 *　　　　　　　　　　┗┻┛　┗┻┛+ + + +
 */
const path = require("path");
const webpack = require('webpack'); // 导入webpack模块
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 生成html插件
const CopyWebpackPlugin = require('copy-webpack-plugin');//拷贝文件
const ExtractTextPlugin = require('extract-text-webpack-plugin'); // 生成 other文件插件
const CleanWebpackPlugin = require('clean-webpack-plugin');//清除deploy
const theme = require('./src/theme.json');

module.exports = {
    entry: {
        // 入口点文件
        'app': ['index.js'],
    },
    output: {
        //输出点
        path: path.resolve(__dirname, 'deploy', 'js'),
        filename: `[name].js`,
        chunkFilename: '[name].js?[chunkhash]',
        publicPath: './js/'
    },
    plugins: [
        new CleanWebpackPlugin(
            'deploy/**/*',　 //匹配删除的文件
            {
                root: __dirname,//根目录
                verbose: true, //开启在控制台输出信息
                dry: false //启用删除文件
            }
        ),
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require("./vendor/manifest.json"),
            name: 'libs'
        }),
        //根据模板插入css/js等生成最终HTML
        new HtmlWebpackPlugin({
            filename: '../index.html',    //生成的html存放路径，相对于 path
            template: path.resolve(__dirname, 'src', 'tmp.html'),    //html模板路径，相对于webpack.config
            inject: true,    //允许插件修改哪些内容，包括head与body
            hash: true,    //为静态资源生成hash值
            minify: {    //压缩HTML文件
                removeComments: true,    //移除HTML中的注释
                collapseWhitespace: false    //删除空白符与换行符
            }
        }),
        new CopyWebpackPlugin([
            {
                from: path.resolve(__dirname, 'src/fonts/'),
                to: path.resolve(__dirname, 'deploy/fonts/')
            },
            {
                from: path.resolve(__dirname, 'src/iconfont/'),
                to: path.resolve(__dirname, 'deploy/iconfont/')
            },
            {
                from: path.resolve(__dirname, 'vendor/'),
                to: path.resolve(__dirname, 'deploy/vendor/')
            }
        ]),
        new ExtractTextPlugin({
            filename: "../style/[name].css",
            allChunks: true
        })
    ],
    module: {
        //加载器配置
        rules: [
            {
                test: /\.js$/,
                include: [path.resolve(__dirname, 'src')],
                loader: 'babel-loader',
                exclude: path.join(__dirname, 'node_modules')
            }, {
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: ["css-loader",
                        {
                            loader: "less-loader",
                            options: {
                                modifyVars: theme
                            }
                        }
                    ]
                })
            }, {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })
            }, {
                test: /\.(png|jpg|jpeg|gif|ico)$/,
                use: [
                    {
                        loader: "url-loader",
                        options: {
                            limit: 8192,
                            name: "../images/[name].[ext]",
                            publicPath: '../images/'
                        }
                    }
                ]
            }, {
                test: /\.(otf|eot|svg|ttf|woff)\??/,
                use: [
                    {
                        loader: "url-loader",
                        options: {
                            limit: 8192,
                            name: '../font/[name].[ext]',
                            publicPath: '../font/'
                        }
                    }
                ]
            }
        ]
    },
    //解析
    resolve: {
        //绝对路径, 查找module的话从这里开始查找(可选)
        modules: [
            path.join(__dirname, "src"),
            "node_modules"
        ],
        // //自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名
        extensions: ['.js', '.json', '.less', '.css'],
        //别名配置
        alias: {
        }
    }
};