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 }

转载于:https://www.cnblogs.com/Ari1c/p/8289054.html