3.webpack配置

1.项目目录

2.配置代码const path        = require(‘path‘);const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);const ExtractTextPlugin = require(‘extract-text-webpack-plugin‘);const webpack = require(‘webpack‘);module.exports = { entry: ‘./src/app.jsx‘, output: {  path: path.resolve(__dirname, ‘dist‘),  filename: ‘js/app.js‘,  publicPath: "/dist/" }, module: {  rules: [   //jsx   {    test: /\.jsx$/,    exclude: /(node_modules)/,    use: {     loader: ‘babel-loader‘,     options: {      presets: [‘env‘,‘react‘]//根据环境打包(浏览器，node)     }    }   },   //css   {    test: /\.css$/,    use: ExtractTextPlugin.extract({     fallback: "style-loader",     use: "css-loader"    })       },   //sass   {    test: /\.scss$/,    use: ExtractTextPlugin.extract({     fallback: ‘style-loader‘,     use: [‘css-loader‘, ‘sass-loader‘]    })   },   //图片的配置   {    test: /\.(png|jpg|gif)$/i,    use: [     {      loader: ‘url-loader‘,      options: {       limit: 8192,       name:‘resource/[name].[ext]‘      }     }    ]   },   //字体的配置   {    test: /\.(otf|eot|svg|ttf|woff|woff2)$/i,    use: [     {      loader: ‘url-loader‘,      options: {       limit: 8192,       name:‘resource/[name].[ext]‘      }     }    ]   }  ] }, plugins: [  //处理css文件  new HtmlWebpackPlugin({   template:‘./src/index.html‘  }),  //独立css  new ExtractTextPlugin("css/[name].css"),//参数为生成css的位置  //提取公共模块  new webpack.optimize.CommonsChunkPlugin({//webpack自带插件，不用安装   name:‘common‘,   filename:‘js/base.js‘  }) ], devServer: {  // contentBase: path.join(__dirname, ‘dist‘),  port: 9999 }};

原文地址：https://www.cnblogs.com/ipoodle/p/9614291.html