Webpack 入门实战：多入口、CSS分离与异步加载详解

近期在项目开发中使用了Webpack，特此对目前掌握的使用技巧进行简要总结。

为什么选择Webpack

为什么选择Webpack

首先，Webpack本身的流行程度是一个重要考量因素。

其次，之前的项目通过RequireJS基于AMD规范进行模块化开发。Webpack不仅支持打包功能，还兼容AMD和CommonJS两种模块化规范，因此决定尝试使用Webpack来实现模块化开发。

此外，项目需求相对简单，适合初学者上手。主要目标包括生成上线目录、实现模块化以及代码压缩等基础功能。

Webpack实战配置

Webpack实战配置

webpack.config.js的标准写法

在配置文件开头，需声明路径相关变量并引入必要的依赖（如Webpack本身，虽非必须但推荐）。接着在entry中定义入口文件的路径和文件名，在output中指定生成文件的路径和名称。module部分用于声明处理不同文件的loader，而plugins部分则配置具体使用的插件。

代码压缩与公共库提取

代码压缩处理

此处使用Webpack内置的压缩插件，配置位于webpack.config.js的plugins字段中。

new webpack.optimize.UglifyJsPlugin({
  compress: {
    warnings: false
  }
})

提取公共类库

虽然本项目未直接使用此功能，但这是基于Webpack内置插件的常见做法。其目的是将jQuery等第三方库整合到单独的文件中，避免所有代码合并导致单个文件体积过大。

首先在entry中声明第三方库列表。

entry: {
  app: path.resolve(APP_PATH, 'index.js'),
  //添加要打包在vendeors里面的库
  vendors: ['jquery', 'moment']
},
plugins: {
   //把入口文件里面的数组打包成vendors.js
  new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),
}

CSS单独打包策略

CSS单独打包策略

有时需要将CSS单独打包以便通过CDN分发，或者如本项目情况：页面引入了大量CSS和JS文件，且JS脚本置于页面底部加载。若CSS由JS动态引入，会导致页面初始加载时无样式，直到JS解析执行。因此，将CSS单独打包并在HTML中直接引入是更优方案。

首先需要安装相关插件。

npm install extract-text-webpack-plugin –save-dev

随后在webpack.config.js中声明该插件。

// 引入css 单独打包插件
var ExtractTextPlugin = require("extract-text-webpack-plugin");
// 设置生成css 的路径和文件名，会自动将对应entry入口js文件中引入的CSS抽出成单独的文件
var packCSS = new ExtractTextPlugin('./css/[name].min.css'); 

在plugins数组中引入并启用该插件。

 plugins: [
  packCSS
 ]

需在JS代码中引用相应的CSS文件。

 require('./css/plan.css');

该插件会自动提取JS中引入的CSS文件，并生成独立的CSS文件。

样式与图片处理

样式处理配置

安装css-loader和style-loader。

 npm install css-loader style-loader --save-dev

css-loader负责遍历CSS文件并处理url(...)引用；style-loader则将所有样式插入到页面的style标签中。

 module: {
   loaders: [
    { 
     test: /\.css$/,
     loaders: ['style', 'css'],
     include: APP_PATH
    }
   ]
 }

图片资源处理

安装url-loader。

npm install url-loader --save-dev

在webpack.config.js中进行配置。

{
  test: /\.(png|jpg)$/,
  loader: 'url?limit=8192&name=images/[hash:8].[name].[ext]'

}

通过limit参数设置阈值，小于该值的图片将自动转换为Base64编码，大于该值的图片则打包到name参数指定的路径。图片文件名将包含8位MD5哈希值、原始文件名（name）及扩展名（ext）。

我在图片处理上遇到的问题与CSS类似：原本在JS中引入CSS和图片等静态资源，但由于页面引入了大量CSS和JS文件，且JS文件置于最后加载，导致JS引用的CSS和图片在最后才加载。这会造成页面初始加载时样式丢失，图片显示失败。

原本希望将图片单独打包，但经过搜索和实践，未找到可靠的实现方式。因此，暂时将图片放置在其他公共资源目录中作为权宜之计。

多入口文件生成

一个页面对应一个JS文件

本项目涉及多个页面，需要为每个页面生成对应的独立JS文件。处理方法是将每个JS文件作为独立的入口文件配置在entry中。设置好output中的公共路径后，即可生成对应的多个JS文件。

  entry: {
    creative: './src/static/js/apps/idea.js',
    plan: './src/static/js/apps/plan.js',
  },
  output: {
    path: 'dist/',
    filename: 'js/[name].min.js'
  }

更新记录

代码切分与异步加载

代码切分与异步加载

今日遇到的问题涉及一个分为四个步骤的页面。每进入下一步，都需要对下一步的内容进行接口请求、页面渲染及事件绑定等操作。

之前的解决方案

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

此时的配置状态如下。

  var stepOne = require('./mods/stepone.js');
  var steptwo = require('./mods/steptwo.js');
  ...

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

这种做法由于CommonJS的同步加载机制，导致入口文件打包后体积臃肿。首屏加载时，无论是否用到处理代码，所有模块都会一并加载，严重影响了首屏加载速度。

代码切分后的优化

利用Webpack的Code Splitting特性，对各步骤代码进行拆分，实现按需加载。主要利用webpack的require.ensure函数实现。只需将异步加载的代码放入require.ensure的回调函数中即可：

  require.ensure(['./mods/stepone.js'], function(){
    var stepone = require('./mods/stepone.js');
    stepone.checkone();
  }, 'stepone'); // 第三个参数设置打包名称

如此配置后，Webpack会单独生成拆分后的文件。还需设置拆分文件的名称和路径，此处经过一番摸索。

Webpack默认使用数字命名拆分文件，若不自行设置，会得到类似1.min.js的文件。可在webpack.config.js中通过output.chunkFilename设置分块生成文件的名称，分块路径通过output.publicPath设置。务必设置publicPath，否则生成的路径可能与上线打包路径不符。具体配置如下：

  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'js/apps/[name].min.js',
    publicPath: '/dist/', // 设置require.ensure路径
    chunkFilename: 'js/apps/[name].min.js' // 设置require.ensure 文件名
  }

总结

Webpack的使用感觉新颖且易于上手。本次总结多为入门内容，后续将继续深入使用。

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