瞎扯
写react已经写了3个月了.虽然redux,es6 ,react,antd这些都会写了.
但对于前端一个项目的搭建,还是很陌生.
对于webpack还是没怎么接触.
毕竟项目不需要自己搭.环境也不用配,往里填代码就行.
但作为有经验的开发人员,怎么能不搞明白呢.
概念
查看原文
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
看到这里.
我发现好像,有点懂什么意思了.
其实类似于,把所有js打包整合到一起.
传统前端都是以文件夹的形式,上传到服务器,来进行发布的.
有了这个webpack,就相当于,我们的android需要gradle进行编译一样.
打包输出成一个apk.
如图
entry
module.exports = {
entry: './path/to/my/entry/file.js'
};
这个最简单.
就是程序的入口.是哪个js.
相当于启动页.
output
output: {
path: path.resolve(__dirname, 'dist'), //这个是路径目录名.
filename: 'my-first-webpack.bundle.js' //这个是打包后的文件名
}
好比你要把apk输出到哪个文件夹下,叫什么名字一样
loader
这段话,有点像强行翻译过来的意思.
大致意思呢,就是webpack不能识别除了js以外的文件.
但是用loader就可以扩展.
好比解析器.不同的文件对于不同的解析器.
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' },
{ test: /\.(js|jsx)$/, use: 'babel-loader' },
]
}
rules 这个词在前端一般就是规则集合的意思.
test 这个不是测试的意思,而是指定要转换的类型,比如'js','css','jsx','png'这些
use 这个是使用哪个解释器进行加载,也就是各种库.比如babel-loader各种.
plugins
插件的意思.
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
这里什么意思呢?
其实就是,生成帮你自动index.html文件
插件的作用就是生成html文件的.
关于插件具体可以看:
插件
总结
虽然,用起来应该还是会懵逼,但过了一遍,感觉还好多了.
说实在的,android写了这么多年,我对gradle还是不是很熟.哈哈.看的懂写不出系列
您的喜欢与回复是我最大的动力－＿－
交流群:493180098