webpack3+React 的配置全解
webpack3的配置相对于webpack2又有了一些新的变化,这里讲其记录下来,备查。
package.json的完整文件在结尾。
1.安装
npminit yarnaddwebpackwebpack-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版本的getstart刚刚更新。单独打包了补丁,所以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
yarnaddbabel-loaderless-loaderpostcss-loadercss-loaderstyle-loader-D yarnaddreact-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.1HtmlWebpackPlugin插件。
自动生成html文件,并自动引入script文件。有几个页面就要new几个插件,自动引入同名的js文件。
constHtmlWebpackPlugin=require("html-webpack-plugin"); newHtmlWebpackPlugin({ template:path.resolve(__dirname,"src/index.html"), name:"index", title:"webpackconfigcli", filename:"index.html", inject:true, }),
5.2CommonsChunkPlugin插件将单独的部分作为chunk提出去,减小文件体积,这里的name要和entry中对应。
newwebpack.optimize.CommonsChunkPlugin({ name:'vendor', filename:'js/vendor.js' }),
5.3webpack模块热替换插件HotModuleReplacementPlugin
newwebpack.HotModuleReplacementPlugin()
5.4ExtractTextPlugin分离css文件
在这个插件加载以前,css文件是放在js文件中,在解释js时,将文本插入到style节点中。
使用这个插件以后,就直接可以单独分离css文件。
但是在开发环境中不要使用,会影响热重载的速度。
ExtractTextPlugin的插件配置相对复杂。首先包裹loaders,注意这里已经不能再使用style-loader了,因为提取css的任务插件完成了。当提取失败时,使用style-loader。
constExtractTextPlugin=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处理别名。
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:notestspecified\"&&exit1", "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" } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。