webpack的配置

//处理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}