目录 上节：使用loader之打包图片 目录结构如下： 本节使用webpack处理样式，先在src下添加样式文件并引入到index.js中：新建src/styles/index.css并添加如下内容: {代码...} 修改src/index.js: {代码...} 修改webpack.config.js，配置css相关loaderwebpack.config.js: {代码...} 修改完后目录如下： 然后安装相关loader...

目录 上节：使用plugins 目录结构： webpack默认只识别js文件，其它文件如图片、字体、样式等都需要安装对应的loader才能识别，本节介绍如何在webpack中处理图片。 修改src/index.js，使其在页面中插入一张图片： {代码...} 这时执行npm run build, 不出意外会报如下错误： 提示缺少能够处理图片的loader, 现在来改一下w...

目录 上节：entry与output {代码...} webpack.config.js: {代码...} 先执行下打包：npm run build, 生成bundle文件夹： 现在有两个问题： bundle下没有html文件，无法在浏览器运行打包后的代码 由于output.filename使用了hash，如果我们自己新建html，那每次打包后都必须手动修改引用路径 为了解决上述问题，介绍本教程...

目录 上节： 基本配置与mode目录结构如下： 本节将重点讲解entry和output的常用配置。 一、entry 先跟新webpack.config.js，将output删除：webpack.config.js: {代码...} 然后执行：npm run build 在根目录下生成了dist目录，并且打包后的文件名为main.js。那么问题来了，这个文件名是依据什么生成的呢？ 复制一份src下...

目录上一节：起步 {代码...} 一、创建配置文件 首先在根目录下新建配置文件webpack.config.js, 并添加如下内容： webpack.config.js： {代码...} 在配置文件中，指定了最基础的三个选项,也是webpack默认的几个配置项，即： 打包环境：mode, 入口：entry 出口：output 此时在根目录下执行：npm run build将会得到与上节一...

目录上节：webpack简介 一、webpack安装 首先新建一个空文件夹，在改文件夹下打开命令行，输入npm init -y 创建一个package.json文件。 然后在package.json中填好一些基本信息，一个基本的package.json内容大致如下：package.json {代码...} webpack推荐使用局部的安装方式，即在项目根目录下执行如下命令： {代码...} ...

webpack会分析入口文件的各种依赖关系，比如main.js中引入了什么css、js、图片？而依赖的某js文件中是否又依赖了其它的资源文件？这一系列复杂的依赖关系，webpack都会精准的帮我们梳理好，并且打包编译成最终线上代码。