webpack打包大概流程

webpack

步骤

1.	新建一个webpack.config.prod.js

2.	压缩bundle.js和index.html

	//设置为生产环境
    new webpack.DefinePlugin({
        'process.env': {
            NODE_ENV: '"production"'
        }
    }),

    //压缩js
    new webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: false //压缩警告
        },
        comments: false //去掉版权信息等注释
    })

	//压缩index.html
	new HtmlWebpackPlugin({
        template: './template.html', 
        filename: 'index.html',
        minify:{
            collapseWhitespace:true,//压缩空格
            removeComments:true,//去除注释
            minifyJS:true,//压缩js
            minifyCSS:true//压缩css
        }
    })

3.	干掉热重载

4.	设置output
    output: {
        path:path.resolve(__dirname,"dist"),
		filename:'bundle.js' 
    }

5.	设置package.json
	"build": "webpack --progress --config webpack.config.prod.js"	

6.    抽离图片
            {
            test: /\.(png|jpg|gif)$/,
            use: [
                {
                    loader: 'url-loader',
                    options: {
                        limit: 4000,//大于4kb就抽离出去
                        name:"images/[name]-[hash:5].[ext]"
                        }
                    }
                ]
            }

    7.    打包之前干掉dist目录
            //打包之前，删除dist目录
            var CleanWebpackPlugin = require('clean-webpack-plugin')

            //打包之前，删除dist目录，写在其它插件前面 plugins里面
                new CleanWebpackPlugin('dist'),

    8.    第三方包抽离
               
            entry
                    entry: {
                        quanjiatong:['react','react-dom','react-router-dom'],
                        fetchJsonp:['fetch-jsonp'],
                        bundle:'./src/main.js'  
                       }

            output
                    output: {
                        path:path.resolve(__dirname,"dist"),
                        filename:'js/[name].js' //抽离第三方包2
                    }
                
            plugins
                  // 抽离第三方包3
                        new webpack.optimize.CommonsChunkPlugin({
                                    name: ['quanjiatong','fetchJsonp'],
                   // filename: "vendor.js"
                    // (给 chunk 一个不同的名字)
    
                                    minChunks: Infinity,
                        // (随着 entry chunk 越来越多，
                    // 这个配置保证没其它的模块会打包进 vendor chunk)
                    })  
                
    9.     抽离bundle中的样式文件
           
            //抽离第三方样式的包
            const ExtractTextPlugin = require("extract-text-webpack-plugin");                

            {
            test: /\.css$/,
            // use: ['style-loader', 'css-loader']
            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: [
                    {
                        loader: 'css-loader',
                        options: {
                            minimize: true //压缩css
                        }
                    }
                ]
            })
        }

            new ExtractTextPlugin("css/styles.css")