webpack3+React 的配置全解

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" ); 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中对应 。

?

1 2 3 4

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

5.3 webpack 模块热替换插件 HotModuleReplacementPlugin

?

1	new webpack.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"       ]      })     }   // 插件部分    new ExtractTextPlugin({     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