webpack--react配置

Posted 2020-10-26 小数点就是问题

当今一般都流行脚手架使用，所以一般react\vue\angular官网都有推荐的安装方式，

react有好几种，一般是react-cli或自己配置。

package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "测试",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "Webpack-dev-server"
  },
  "author": "zhangzhicheng",
  "license": "ISC",
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-plugin-react-html-attrs": "^2.1.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "^3.0.2",
    "html-webpack-plugin": "^2.30.1",
    "less": "^3.0.1",
    "less-loader": "^4.1.0",
    "postcss-loader": "^2.0.9",
    "style-loader": "^0.19.1",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.9.7"
  }
}

webpack.config.js

const debug = process.env.NODE_ENV !== "production";
const webpack = require(‘webpack‘);
const path = require(‘path‘);

module.exports = {
  entry: ‘./src/index.js‘,
  output: {
    path: path.resolve(__dirname, ‘dist‘),
    filename: ‘bundle.js‘
  },
  module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /(node_modules|bower_components)/,
          use: {
            loader: ‘babel-loader‘
          }
        },
        {
        test: /\.css$/,
        use: [
          ‘style-loader‘,
          { loader: ‘css-loader‘, options: { importLoaders: 1 } },
          {
              loader: ‘postcss-loader‘,
              options: {
                ident: ‘postcss‘,
                plugins: (loader) => [
                  require(‘autoprefixer‘)()
                ]
              }
            }
            ]
        },
        {
        test: /\.less$/,
        use: [
          ‘style-loader‘,
          { loader: ‘css-loader‘, options: { importLoaders: 1 } },
          {
              loader: ‘postcss-loader‘,
              options: {
                ident: ‘postcss‘,
                plugins: (loader) => [
                  require(‘autoprefixer‘)()
                ]
              }
            },
            ‘less-loader‘,
        ]
      }
      ]
    },
    devServer: {
      contentBase: path.join(__dirname, "dist"),
      compress: true,
      port: 9000,
      hot: true,
      inline: true
    },
    plugins: [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
    new webpack.HotModuleReplacementPlugin()
  ]    
};


/*
以上是使用less+babel+react配置

启动webpack-dev-server配置devServer

基本上配置webpack都去官网和各模块官网复制粘贴就可以了，都有推荐配置

而postcss-loader这个自定义一些css预处理方式，可以和less\sass\stylus配合使用
 */

/*如果你使用了一些有着很酷的依赖树的库，
那么它可能存在一些文件是重复的。webpack可以找到这些文件并去重。
这保证了重复的代码不被大包到bundle文件里面去，取而代之的是运行时请求一个封装的函数
webpack.optimize.DedupePlugin()

根据模块调用次数，给模块分配ids，常被调用的ids分配更短的id，使得ids可预测，降低文件大小，该模块推荐使用
OccurrenceOrderPlugin

压缩js
UglifyJsPlugin

热替换模块，使用热替换使用的
HotModuleReplacementPlugin
*/

 

webpack使用3版本，因为4版本不稳定。

.babelrc

{
  "presets": ["react","env"],
  "plugins": [
    "react-html-attrs"
  ]
}

 

使用react-html-attrs，因为react不能正常使用class,react都是使用ES6 clas类编写组件的和使用jsx，html的class会和ES6的冲突，
所以使用react-html-attrs解决，这就可以使用class在jsx的html里。



postcss插件资料 
postcss插件资料2