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"
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。