xstarp/webpack.config.js at master · pumpinger/xstarp · 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


const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const TransferWebpackPlugin = require('transfer-webpack-plugin');


const HtmlWebpackPlugin = require('html-webpack-plugin');

const extractCSS = new ExtractTextPlugin('[name].css');
// const extractSCSS = new ExtractTextPlugin('[name].scss.css');


module.exports = {
    context: path.resolve(__dirname, './src'),
    entry: {
        app: ['./dev.js'],

        vendor: ['jquery','./vendor/webuploader.js','./vendor/jquery.validate.js'],
        // vendor: ['./vendor/webuploader.js','./vendor/jquery.validate.js'],
        // jquery: []
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        // filename: '[name].[chunkHash:8].js',
        filename: '[name].js',
        publicPath: '/'  //todo  这里为什么 不能用 ./
    },
    module: {
        rules: [
            /*            {
                            test: /\.css$/,
                            // use: ['style-loader', 'css-loader'],
                            // use:  ExtractTextPlugin.extract({
                            //     loader: 'css-loader?importLoaders=1',
                            // }),
                            use:  extractCSS.extract([
                                'css-loader',
                                'sass-loader',

                            ])
                        },*/
            {
                test: /\.(svg|eot|woff|ttf)$/,
                loader: 'file-loader?name=[name].[ext]&publicPath=./&outputPath=./fonts/',
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: 'file-loader?name=[name].[ext]&publicPath=./&outputPath=./img/',
            },
            {
                // test: /\.(sass|scss)$/,
                test: /\.(sass|scss|css$)$/,
                use:  extractCSS.extract([
                    // 'style-loader',
                    'css-loader',
                    'sass-loader',
                ]),
            },
            {
                test: require.resolve('jquery'),  // 此loader配置项的目标是NPM中的jquery    //变成了全局变量（非CMD插件）
                loader: 'expose-loader?$!expose-loader?jQuery', // 先把jQuery对象声明成为全局变量`jQuery`，再通过管道进一步又声明成为全局变量`$`
            },
        ],
    },
    devServer: {
        port:9200,
        contentBase: path.resolve(__dirname, './')  // 这里渲染根目录不重要因为要用docsify的服务器根目录,这里只是提供一个热更新js,css
    },
    // externals:{
    //     'jquery':'jQuery',   //伪装jquery ,把全局的jQuery 给他(就不会打包jQuery了)
    //     '$dp':'$dp',
    //     'WdatePicker':'WdatePicker'
    // },
    // devtool:'source-map',
    plugins: [     //分开打包
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            filename: './vendor/js/[name].js',
            // chunks:['app','vendor']
        }),


        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        }), //生产环境开  就好了

        extractCSS,


        // new webpack.ProvidePlugin({    //变成了编译过程中的全局变量  不用在自己文件require('jquery')
        //     $: 'jquery',
        //     jQuery: 'jquery',
        //     'window.jQuery': 'jquery',
        //     'window.$': 'jquery',
        // }),
        // new CleanWebpackPlugin(
        //     ['dist/app.*'],　 //匹配删除的文件
        //     {
        //         root: __dirname,       　　　　　　　　　　//根目录
        //         verbose:  true,        　　　　　　　　　　//开启在控制台输出信息
        //         dry:      false        　　　　　　　　　　//启用删除文件
        //     }
        // )
        // extractSCSS,

        // new HtmlWebpackPlugin({
        //     title: 'demo',
        //     template: 'index.html' // 模板路径
        // }),

        new TransferWebpackPlugin([
            {from: "./src/vendor/wdatepicker",to:"./vendor/wdatepicker"}
        ], path.resolve(__dirname,'./'))

    ],
};

//场景1 ： 用户自己用自己的jq  ：切换vender   要1.externals；2.new webpack.ProvidePlugin     不要1.CommonsChunkPlugin；2.test: require.resolve('jquery')


//场景2 ： 用户用我们的vendor ：切换vender   要1.CommonsChunkPlugin；2.test: require.resolve('jquery')    不要1.externals；2.new webpack.ProvidePlugin


//现在  new webpack.ProvidePlugin 未发现明显作用了，可能是我错了