最近在项目中使用了一下webpack，所以这里打算对目前了解的使用方法做一个小小的总结 [b]为什么是webpack[/b] 1.webpack一下自己就🔥了，这绝对是一个重要的原因。 2.然后我之前项目中都是通过requireJS，通过AMD来做到模块化开发。webpak不仅支持打包，而且支持AMD 和 CommonJS方式来做模块化开发，所以打算尝试一下webpack来实现模块化。 3.我的需求简单，适合新上手webpack，只需要生成上线目录，实现模块化，压缩代码等等 [b]webpack实战[/b] [b]webpack.config.js 一般写法[/b] 开头声明对路径相关的变量，以及引入依赖，包括webpack(非必须)，以及需要的插件  然后，entry 声明入口相关的如文件名，路径等，output 声明生成文件相关的路径和文件名，module 中是针对不同文件进行处理的 loader 声明，plugins 声明了插件的具体使用。 [b]压缩代码[/b] 这里使用webpack的内置的插件，我们写在webpack.config.js 中的plugins 部分 [b]提取公共类库[/b] 这部分我没有用到，但也是基于webpack 内置的插件，目的是将用到的jquery 等第三方库整合到一个文件，否则都合并到一个文件，会造成这个文件特别大 首先在entry 声明第三方库 [b]css 单独打包[/b] 有的时候需要将css 单独打包，作为CDN，或者我这里的情况是是，页面引入了很多的css js 文件，而我的js 在最后加载！所以如果是js 中引入的css ，那么会导致页面在开始的时候没有样式，知道解析到我的js ！所以这里将css 单独打包，单独在页面引入！ 首先需要安装插件 然后在webpack.config.js 中声明插件 在plugins 中引入并使用 我们需要首先在js 中引用相应的css文件 然后这个插件会自动将js中的css文件提取出来，生成单独的文件 [b]样式的处理[/b] 安装 css-loader style-loader css-loader会遍历css文件，找到所有的url(...)并且处理。style-loader会把所有的样式插入到你页面的一个style [b]图片的处理[/b] 安装 url-loader webpack.config.js limit 设置一个阈值，小于这个值得图片就会自动启用 base64 编码的图片，大于这个值的图片会打包到name 这参数对应的路径，图片名称就会包括8位md5编码 name 对应文件本来名称，ext 对应扩展名 我在图片这里遇到的问题和 css 类似，都是原本我是在 js 中引入 css img 等静态资源。但是  因为我的页面引入了很多的 css, js 文件，而我的js文件放到最后加载，所以会导致我的js引用的css img 在最后才加载。这会导致页面开始的时候会出现没有样式，而图片刚开始会显示失败的问题。 我本来也希望将 img 单独打包，但是搜索也实践了，没有找到可靠地实现方式，于是我把图片放到了其他公共资源目录（~~~~(>_<)~~~~，只好暂时出此下策了） [b]一个页面一个js 文件[/b] 我做的项目是多个页面的，所以需要生成每个页面对应的不同 js。这里的处理方法就是我们每个 js 都作为一个不同的入口文件现在 enrty 中。这样设置好 output 中的公共路径，就能得到不同的 js 文件。 更新 代码切分以及异步加载 今天遇到的问题是，我做的一个页面是要分为四个步骤，每个步骤在进入下一步的时候需要对下一步的内容进行接口请求，页面渲染和事件绑定等操作。 之前的做法 拆分了各个步骤对应模块之后，我通过commonJS的方式在入口文件开头引入了各个模块 这时候是这样的 这种做法，因为commonJS 的同步加载机制，会导致入口文件打包之后非常臃肿。在首屏，用到用不到处理代码的都会在一开始就加载，严重影响了首屏加载时间。 [b]代码切分之后[/b] 我利用webpack的code splitting 特性，将各个步骤的代码进行拆分，实现按需加载。这里主要利用了 webpack 的 require.ensure 函数实现的。非常方便，只需要把异步加载的代码，放到 require.ensure 里面的回调函数就可以实现： 这样设置，webpack 就会单独生成拆分的文件，我们还需要设置拆分文件的名字和路径。这里我费了一番周折。 webpack 默认给拆分的文件用数字命名，如果我们自己不进行设置，会得到 1.min.js 这样类似的文件。我们可以在 webpack.config.js 中，通过 output.chunkFilename 来设置分块生成文件的名称，分块的路径可以通过 output.publicPath 设置。这里一定要设置 publicPath，不然得到的路径有可能不是我们上线打包的路径。具体我的设置如下: [b]总结[/b] webpack 使用起来感觉非常新颖，也容易入手！今天总结的多是入门的内容，后续还要继续使用~ 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程素材网。