转眼春节之后已经快要开工一个月了,还记得春节期间给自己定下的一个小目标,在2017年要学会react相关的技术。其实2016年我已经对react开发有所实践,但是总觉得似懂非懂。所以开了博客来梳理一下。我也是查看了很多大神的博客,慢慢摸索总结得出以下内容,不完善之处,恳请各位大神斧正。
工欲善其事,必先利其器。我先从webpack配置开始梳理。
首先当前项目目录结构是这样的:
-|app
-|src
-|a.js
-|b.js
-|dist
-|index.html
-|node_modules
-|...
-|package.json
-|webpack.config.js
webpack常见的配置,一般有entry、output、module、resolve、plugins五项。
1.entry用来配置入口文件。入口文件可以是对象的形式也可以是数组形式。两者的区别是数组形式的配置是将数组内所有的模块打包成一个js文件,对象形式的配置可以将对每个属性分别打包成一个js文件。
2.output用来配置输出文件,一般是path和filename属性,path配置输出文件路径,filename配置输出文件名称。
为了表述的更清晰,上代码:
//demo01
entry:['./src/a.js','./src/b.js'],
output:{
path:'./dist',
filename:'main.js'
}
//此时dist里面main.js是src里面a.js和b.js的合并文件
//demo02
entry:{
a:'./src/a.js',
b:'./src/b.js'
},
output:{
path:'./dist',
filename:'[name].js'
}
//此时dist里面的a.js和b.js分别对应entry里面key为a和b输出的文件
//demo03
entry:{
a:'./src/a.js',
b:['./src/a.js','./src/b.js']
},
output:{
path:'./dist',
filename:'[name].js'
}
//此时dist里面的a.js和b.js分别对应entry里面key为a和b输出的文件,其中key为b输出的文件是a.js和b.js的合并文件
3.module 用来配置各种loaders,他的loaders属性是一个包含各项loader配置的数组,上代码:
//demo04
module:{
loaders:[
{
test:/\.js$/, //匹配所有以.js结尾的js文件
exclude:/node_modules/,//上面test不匹配node_modules文件夹里面的js文件,这里还有一个相对的设置 include,代表包含某个文件夹里面的文件
loader:'babel-loader',//应用的loader,多个loader之间用!隔开
query:{presets:['es2015','react']}
}
//...其他的loader也是类似这样配置
]
}
4.resolve 可以配置路径简写,也可以配置需要引用的包
//demo05
resolve:{
alias:{
@: 'd:/test/', //以后import 的时候可以用 @ 代替'd:/test/'
b:'d:/test/..../app/src/b.js' //这里需要配置绝对路径,key决定了import 时的名称
}
}
5.plugins 配置各种插件项。上代码:
//demo06
import webpack from 'webpack';
let commonPlugin=new webpack.optimize.CommonsChunkPlugin('common.js');
module.exports={
plugins:[commonPlugin],//插件new 出来之后,配置在这里的数组里面
}