webpack3+React 的配置全解

前端之家收集整理的这篇文章主要介绍了webpack3+React 的配置全解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

1. 安装

2. 配置简单输入输出

webpack.config.js

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

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

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

3. webpack-dev-server

4. loaders

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

4.1 安装loader

css-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

css-loader","postcss-loader" ] },{ test: /\.less$/,"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|#)*)?$/,options: { name: "static/font/[name].[ext]" } }] } ] },

.babelrc

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

postcss.config.js

5. 插件

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

5.1 HtmlWebpackPlugin 插件

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

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

5.3 webpack 模块热替换插件 HotModuleReplacementPlugin

5.4 ExtractTextPlugin 分离css 文件

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

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

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

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

css-loader","postcss-loader" ] }) },"less-loader" ] }) } // 插件部分 new ExtractTextPlugin({ filename: "css/index.css" }),

6. 其他

extensions:用于省略后缀名

alias 处理别名 。

7.package.json

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

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

原文链接:https://www.f2er.com/js/36974.html

猜你在找的JavaScript相关文章