webpack项目基础结构

发表于   |  更新于   |   分类于   |  

webpack的方便之处，在于是基于js构建的，这和fis基于html构建，截然不同。倡导模块化。

webpack 的构建步骤比 gulp，grunt少很多。已经预配置很多东西

react-webpack配置理解

require css 最后生成 js 文件
称为 jsbundle

图片文件过小，就会以base64 方式引入文件。

resolve: {
extensions: [‘’, ‘.js’, ‘.jsx’],
第一’’的作用,是为了匹配完整路径
require(‘main.js’)
会被main.js main.js.js main.js.jsx

其中entry 会默认，按照读取模块，js，jsx的顺序，查找模块，先找到谁，就匹配谁

only-dev-server用于热更新
把hot设置变成true

port

只在 webpack-dev-server bin
.describe(“port”, “The port”).default(“port”, 8080)
运行port ，但是运行却是8000

设置已修改在
defaults.js
dfltPort 8000

生成命令

package scripts的命令，没有全部生效
npm dist 就不行

webpack dev loader 实现热加载

http://localhost:8000/webpack-dev-server/ 比
根路径http://localhost:8000/ ，热更新稍快快
在index.html 引入

1
<script type="text/javascript" src="/webpack-dev-server.js"></script>

才能实现实时编译
http://localhost:8000/webpack-dev-server/ 是自动引入的

配置里的cache 是缓存生成的代码块。
执行dist才叫生成。

loader 的顺序是从右往左依次执行的