webpack的配置

Posted 2020-10-20 ari1c

 

//处理html文件
const HtmlWebpackPlugin = require("html-webpack-plugin")
//抽离css和sass代码的
const ExtractTextWebpackPlugin = require(‘extract-text-webpack-plugin‘)
const webpack = require(‘webpack‘)
//处理路径
const path = require(‘path‘)

//开发配置
const developmentConfig = {
    entry:{//入口
        main:‘./src/main.js‘,
        // vendor:‘./src/vendor.js‘
    },
    // entry:‘./src/app.js‘,
    // entry:[‘./src/app.js‘,‘./src/vendor.js‘],
    output:{//输出
        path:path.join(__dirname,‘build‘),
        filename:‘[name].js‘
    },
    devServer:{//开发服务器
        port:9000,
        contentBase:‘./build‘,
        historyApiFallback: true,
        open: true,
        proxy:{

        }
    },
    module:{
        rules:[
            {//编译jade
                test:/\.jade$/,
                use:[‘jade-loader‘,‘html-withimg-loader‘]
            },
            {//处理css、js中引入的图片
                test:/\.(png|jpe?g|svg|gif)$/,
                // use:‘url-loader?limit=1000&name=images/[hash:8].[name].[ext]‘
                use:[
                    {
                        loader:‘url-loader‘,
                        options:{
                            limit:1000,
                            name:‘/static/images/assets/[hash:8].[name].[ext]‘
                        }
                    }
                ]
            },
            {//处理html引入的图片，在react中没啥用
                test:/\.html$/,
                use:‘html-withimg-loader‘
            },
//          {//将css代码放入header的style标签中
//              test:/\.css$/,
//              use:[‘style-loader‘,‘css-loader‘]
//          },
//          {//将scss代码编译成css，再将css代码放入header的style标签中
//              test:/\.scss$/,
//              use:[‘style-loader‘,‘css-loader‘,‘sass-loader‘]
//          },
			{//抽离引入css代码放入到一个css文件中
				test:/\.css$/,
				use:ExtractTextWebpackPlugin.extract({
		          fallback: "style-loader",
		          use: "css-loader"
		        })
			},
			{//抽离引入scss代码编译后放入到一个css文件中
				test:/\.scss/,
				use:ExtractTextWebpackPlugin.extract({
		          fallback: "style-loader",
		          use: ["css-loader","sass-loader"]
		        })
			},
//			{//只编译jsx
//				test:/\.(js|jsx)$/,
//				exclude:/node_modules/,
//				use:‘jsx-loader‘
//			},
			{//处理js代码，编译es6、jsx
			    test:/\.(js|jsx)$/,
			    exclude: /node_modules/,//除了哪个目录下的代码
			    loader:‘babel-loader‘,
			    query: {
			        presets: [‘es2015‘,‘react‘]
			    }
			}
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            // title:‘webpack-config-demo‘,
            template:‘./src/index.html‘,
            filename:‘index.html‘
        }),
//      new webpack.optimize.UglifyJsPlugin({
//          compress: {
//              warnings: false,
//              drop_console: false
//          } 
//      }),
        new ExtractTextWebpackPlugin({
        	filename:‘app.css‘,
        	allChunks:true
        })
    ]

}
//生成配置
const productionConfig = {
    entry:{
        app:‘./src/app.js‘,
        vendor:‘./src/vendor.js‘
    },
    output:{
        path:path.join(__dirname,‘build‘),
        filename:‘[name]_[hash].js‘
    },
    plugins:[
        new HtmlWebpackPlugin()
    ]
}
module.exports = (env)=>{
    if(env==‘production‘){
        return productionConfig
    }
    return developmentConfig
}