这段时间由于项目需求,需要做一个以react为基础的web项目,由于之前又只有一部分的react-native和web开发经验,对于这个react本以为就是引入js就完事了,哪晓得完全不是这么回事。
为什么要用webpack?
首先一脸蒙蔽的就是,啥是webpack?为啥非要用这玩意?经过万能的百度最后得出了一点个人的粗见:
1.webpack就是一个打包的地方库,需要创建一个webpack.config.js来配置,打包的入口等等一系列配置。
2.react是使用es6语法来写,游览器并不认得这语言,我们需要使用webpack将其转换成游览器能识别的语言。
项目例子
主要参考的就是这个文章从零开始,教你用Webpack构建React基础工程,
这篇文章还是相当不错的,严格按照上面说的做是可以把项目搭建出来,但是这其中还是有个坑。
var path = require('path');
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'src'); //__dirname 中的src目录,以此类推
var APP_FILE = path.resolve(APP_PATH, 'index'); //根目录文件app.jsx地址
var BUILD_PATH = path.resolve(ROOT_PATH, 'build'); //发布文件所存放的目录
module.exports = {
devtool: 'eval-source-map',//生成Source Maps,这里选择eval-source-map
entry: APP_FILE,//唯一入口文件
output: {//输出目录
path: BUILD_PATH,//打包后的js文件存放的地方
filename: "bundle.js"//打包后输出的js的文件名
},
module: {
loaders: [
{
test: /\.(js|jsx)$/,//一个匹配loaders所处理的文件的拓展名的正则表达式,这里用来匹配js和jsx文件(必须)
exclude: /node_modules/,//屏蔽不需要处理的文件(文件夹)(可选)
loader: 'babel-loader'
}
]
},
resolve: {
extensions: ['.js', '.jsx', '.less', '.scss', '.css'], //后缀名自动补全
}
}
上面是我的webpack.config.js文件,多了那个resolve,这个作用是自动补全,可以帮你把省略的文件后缀补上,我当时死活报出找不到引用的文件,最后发现是引入的时候少了后缀,真tm坑死了。