日更(五十六)-React-webpack

瞎扯

写react已经写了3个月了.虽然redux,es6 ,react,antd这些都会写了.
但对于前端一个项目的搭建,还是很陌生.
对于webpack还是没怎么接触.
毕竟项目不需要自己搭.环境也不用配,往里填代码就行.
但作为有经验的开发人员,怎么能不搞明白呢.

概念

查看原文

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

看到这里.
我发现好像,有点懂什么意思了.

其实类似于,把所有js打包整合到一起.
传统前端都是以文件夹的形式,上传到服务器,来进行发布的.

有了这个webpack,就相当于,我们的android需要gradle进行编译一样.
打包输出成一个apk.

如图

image.png

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

image.png

这段话,有点像强行翻译过来的意思.

大致意思呢,就是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