3.webpack配置

Posted 2021-01-05 haines

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
 }
};