webpack3+React 的配置全解

发布日期： 2026-01-12 阅读量： 作者： 用户投稿

webpack3 的配置相对于webpack2 又有了一些新的变化，这里讲其记录下来，备查。

package.json 的完整文件在结尾。

1. 安装

npm init
yarn add webpack webpack-dev-server -D

2. 配置简单输入输出

webpack.config.js

module.exports = {
 entry: {
  ventor: ['react', 'react-dom'],
  index: [
   'babel-polyfill',
   'react-hot-loader/patch',
   path.resolve(__dirname, "src/index.js")
  ]
 },
 output: {
  path: path.resolve(__dirname, "dist"),
  filename: "js/[name].js",
 },
 devtool: 'source-map'

将所用到的库单独分离出来，在多页面应用中，对减少文件体积很有用。

react-hot-loader 的3.0 版本的get start 刚刚更新。单独打包了补丁，所以react-hot-loader 作为一个生产依赖安装。

这样基本的输入输出就完成了。

3. webpack-dev-server

 devServer: {
  hot: true, // 热重载
  inline: true, // 启用inline 模式
  port: 46480,
  contentBase: path.resolve(__dirname, "dist"),
  proxy: {
   "/api": {
     target: "xxxxx",
     secure: false, // 处理https
     changeOrigin: true,  // 跨域
   }
  }
 },

4. loaders

webpack 将所有的文件都当做js文件处理，所以配置加载器

4.1 安装loader

yarn add babel-loader less-loader postcss-loader css-loader style-loader -D
yarn add react-hot-loader

4.2 配置loader

注意，loader 中的 name 都是相对于 output中的path 的。

postcss-loader是对css 文件做一些预处理，常用就是添加css3属性前缀，用到 autoprefixer 插件。配置postcss-loader ，需要 postcss.config.js 文件。

babel-loader 需要配置option选项，这里单独提出去，放置到.babelrc 文件中。

webpack.config.js

 module: {
  rules: [{
    test: /.js$/,
    use: [
     "react-hot-loader/webpack",
     "babel-loader",
    ],
    exclude: path.resolve(__dirname, "node_modules")
   },
   {
    test: /\.css$/,
    use: [
     "style-loader",
     "css-loader",
     "postcss-loader"
    ]
   },
   {
    test: /\.less$/,
    use: [
     "style-loader",
     "css-loader",
     "postcss-loader",
     "less-loader"
    ]
   },
   {
    test: /\.(gif|png|jpe?g)$/,
    use: [{
     loader: "file-loader",
     options: {
      name: "static/img/[name].[ext]"
     }
    }]
   },
   {
    test: /\.(ttf|eot|svg|woff)(\?(\w|#)*)?$/,
    use: [{
     loader: "file-loader",
     options: {
      name: "static/font/[name].[ext]"
     }
    }]
   }
  ]
 },

.babelrc

{
 "presets": ["es2015", "stage-0", "react"],
 "plugins": ["transform-decorators-legacy"]
}

transform-decorators-legacy 这个插件用来转化es7 中的装饰器，比如 autobind，connect 等。

postcss.config.js

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

5. 插件

插件是webpack 中非常重要的一部分。

5.1 HtmlWebpackPlugin 插件。

自动生成html文件，并自动引入script文件。有几个页面就要new 几个插件，自动引入同名的js文件。

const HtmlWebpackPlugin = require("html-webpack-plugin");
new HtmlWebpackPlugin({
 template: path.resolve(__dirname, "src/index.html"),
 name: "index",
 title: "webpack config cli",
 filename: "index.html",
 inject: true,
}),

5.2 CommonsChunkPlugin 插件将单独的部分作为chunk 提出去，减小文件体积，这里的name 要和 entry中对应。

new webpack.optimize.CommonsChunkPlugin({
 name: 'vendor',
 filename: 'js/vendor.js'
}),

5.3 webpack 模块热替换插件 HotModuleReplacementPlugin

new webpack.HotModuleReplacementPlugin()

5.4 ExtractTextPlugin 分离css 文件

在这个插件加载以前，css 文件是放在js文件中，在解释js时，将文本插入到style节点中。

使用这个插件以后，就直接可以单独分离css 文件。

但是在开发环境中不要使用，会影响热重载的速度。

ExtractTextPlugin 的插件配置相对复杂。首先包裹loaders，注意这里已经不能再使用style-loader了，因为提取css的任务插件完成了。当提取失败时，使用style-loader 。

const ExtractTextPlugin = require("extract-text-webpack-plugin");
 // loader部分
   {
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
     fallback: "style-loader",
     use: [
      "css-loader",
      "postcss-loader"
     ]
    })
   },
   {
    test: /\.less$/,
    use: ExtractTextPlugin.extract({
     fallback: "style-loader",
     use: [
      "css-loader",
      "postcss-loader",
      "less-loader"
     ]
    })
   }
 // 插件部分
  new ExtractTextPlugin({
   filename: "css/index.css"
  }),

6. 其他

extensions：用于省略后缀名

alias 处理别名。

 resolve: {
  extensions: [" ", ".js", ".jsx", ".css", ".less"],
  alias: {
   components: path.resolve(__dirname, 'src/components/'),
   css: path.resolve(__dirname, "src/css/"),
   model: path.resolve(__dirname, 'src/model/'),
   store: path.resolve(__dirname, 'src/store/')
  }
 }

7.package.json

{
 "name": "webpack-react-cli",
 "version": "1.0.0",
 "description": "",
 "main": "webpack.config.js",
 "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev": "webpack-dev-server --open",
  "build": "webpack -w"
 },
 "author": "",
 "license": "ISC",
 "devDependencies": {
  "autoprefixer": "^7.1.2",
  "babel-core": "^6.25.0",
  "babel-loader": "^7.1.1",
  "babel-plugin-transform-decorators-legacy": "^1.3.4",
  "babel-preset-es2015": "^6.24.1",
  "babel-preset-react": "^6.24.1",
  "babel-preset-stage-0": "^6.24.1",
  "css-loader": "^0.28.4",
  "extract-text-webpack-plugin": "^3.0.0",
  "file-loader": "^0.11.2",
  "html-webpack-plugin": "^2.30.1",
  "less": "^2.7.2",
  "less-loader": "^4.0.5",
  "postcss-loader": "^2.0.6",
  "style-loader": "^0.18.2",
  "webpack": "^3.0.0",
  "webpack-dev-server": "^2.5.0"
 },
 "dependencies": {
  "babel-polyfill": "^6.23.0",
  "core-decorators": "^0.19.0",
  "prop-types": "^15.5.10",
  "react": "^15.6.1",
  "react-dom": "^15.6.1",
  "react-hot-loader": "^3.0.0-beta.7"
 }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇: PHP中常见的错误与异常处理总结大全

下一篇: Android ViewPager导航小圆点实现无限循环效果

webpack3+React 的配置全解

随便看看

南昌壹佳企网络通信有限公司