详解webpack 入门总结和实践(按需异步加载，css单独打包，生成多个入口文件)

最近在项目中使用了一下webpack，所以这里打算对目前了解的使用方法做一个小小的总结

为什么是webpack

1.webpack一下自己就🔥了，这绝对是一个重要的原因。

2.然后我之前项目中都是通过requireJS，通过AMD来做到模块化开发。webpak不仅支持打包，而且支持AMD 和 CommonJS方式来做模块化开发，所以打算尝试一下webpack来实现模块化。

3.我的需求简单，适合新上手webpack，只需要生成上线目录，实现模块化，压缩代码等等

webpack实战

webpack.config.js 一般写法

开头声明对路径相关的变量，以及引入依赖，包括webpack(非必须)，以及需要的插件然后，entry 声明入口相关的如文件名，路径等，output 声明生成文件相关的路径和文件名，module 中是针对不同文件进行处理的 loader 声明，plugins 声明了插件的具体使用。

压缩代码

这里使用webpack的内置的插件，我们写在webpack.config.js 中的plugins 部分

提取公共类库

这部分我没有用到，但也是基于webpack 内置的插件，目的是将用到的jquery 等第三方库整合到一个文件，否则都合并到一个文件，会造成这个文件特别大

首先在entry 声明第三方库

css 单独打包

有的时候需要将css 单独打包，作为CDN，或者我这里的情况是是，页面引入了很多的css js 文件，而我的js 在最后加载！所以如果是js 中引入的css ，那么会导致页面在开始的时候没有样式，知道解析到我的js ！所以这里将css 单独打包，单独在页面引入！

首先需要安装插件

然后在webpack.config.js 中声明插件

在plugins 中引入并使用

我们需要首先在js 中引用相应的css文件

然后这个插件会自动将js中的css文件提取出来，生成单独的文件

样式的处理

安装 css-loader style-loader

css-loader会遍历css文件，找到所有的url(...)并且处理。style-loader会把所有的样式插入到你页面的一个style

图片的处理

安装 url-loader

webpack.config.js

}

limit 设置一个阈值，小于这个值得图片就会自动启用 base64 编码的图片，大于这个值的图片会打包到name 这参数对应的路径，图片名称就会包括8位md5编码 name 对应文件本来名称，ext 对应扩展名

我在图片这里遇到的问题和 css 类似，都是原本我是在 js 中引入 css img 等静态资源。但是因为我的页面引入了很多的 css,js 文件，而我的js文件放到最后加载，所以会导致我的js引用的css img 在最后才加载。这会导致页面开始的时候会出现没有样式，而图片刚开始会显示失败的问题。

我本来也希望将 img 单独打包，但是搜索也实践了，没有找到可靠地实现方式，于是我把图片放到了其他公共资源目录（~~~~(>_<)~~~~，只好暂时出此下策了）

一个页面一个js 文件

我做的项目是多个页面的，所以需要生成每个页面对应的不同 js。这里的处理方法就是我们每个 js 都作为一个不同的入口文件现在 enrty 中。这样设置好 output 中的公共路径，就能得到不同的 js 文件。

更新

代码切分以及异步加载

今天遇到的问题是，我做的一个页面是要分为四个步骤，每个步骤在进入下一步的时候需要对下一步的内容进行接口请求，页面渲染和事件绑定等操作。

之前的做法

拆分了各个步骤对应模块之后，我通过commonJS的方式在入口文件开头引入了各个模块

这时候是这样的

// 使用的时候
stepone.checkOne();

这种做法，因为commonJS 的同步加载机制，会导致入口文件打包之后非常臃肿。在首屏，用到用不到处理代码的都会在一开始就加载，严重影响了首屏加载时间。

代码切分之后

我利用webpack的code splitting 特性，将各个步骤的代码进行拆分，实现按需加载。这里主要利用了 webpack 的 require.ensure 函数实现的。非常方便，只需要把异步加载的代码，放到 require.ensure 里面的回调函数就可以实现：

这样设置，webpack 就会单独生成拆分的文件，我们还需要设置拆分文件的名字和路径。这里我费了一番周折。

webpack 默认给拆分的文件用数字命名，如果我们自己不进行设置，会得到 1.min.js 这样类似的文件。我们可以在 webpack.config.js 中，通过 output.chunkFilename 来设置分块生成文件的名称，分块的路径可以通过 output.publicPath 设置。这里一定要设置 publicPath，不然得到的路径有可能不是我们上线打包的路径。具体我的设置如下:

总结

webpack 使用起来感觉非常新颖，也容易入手！今天总结的多是入门的内容，后续还要继续使用~

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。