webpack3+React 的配置全解

来源：互联网发布：淘宝网店流量编辑：程序博客网时间：2024/06/11 14:27

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

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

1. 安装

?
1
2
npm init
yarn add webpack webpack-dev-server -D

2. 配置简单输入输出

webpack.config.js

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
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

?
1
2
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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
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

?
1
2
3
4
{
 "presets": ["es2015", "stage-0", "react"],
 "plugins": ["transform-decorators-legacy"]
}

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

postcss.config.js

?
1
2
3
4
5
module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

5. 插件

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

5.1 HtmlWebpackPlugin 插件。

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

?
1
2
3
4
5
6
7
8
const HtmlWebpackPlugin = require("html-webpack-plugin");
newHtmlWebpackPlugin({
 template: path.resolve(__dirname, "src/index.html"),
 name:"index",
 title:"webpack config cli",
 filename:"index.html",
 inject:true,
}),

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

?
1
2
3
4
newwebpack.optimize.CommonsChunkPlugin({
 name:'vendor',
 filename:'js/vendor.js'
}),

5.3 webpack 模块热替换插件 HotModuleReplacementPlugin

?
1
newwebpack.HotModuleReplacementPlugin()

5.4 ExtractTextPlugin 分离css 文件

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

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

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

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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"
     ]
    })
   }
 // 插件部分
  newExtractTextPlugin({
   filename:"css/index.css"
  }),

6. 其他

extensions：用于省略后缀名

alias 处理别名。

?
1
2
3
4
5
6
7
8
9
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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
{
 "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"
 }
}

原文链接：http://www.cnblogs.com/likeFlyingFish/p/7399704.html?utm_source=tuicool&utm_medium=referral

阅读全文

0 0