52周技术探索系列：Webpack模块化构建工具完全指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00204/article/details/148464535

52周技术探索系列：Webpack模块化构建工具完全指南

52-technologies-in-2016 Let's learn a new technology every week. A new technology blog every Sunday in 2016. 项目地址: https://gitcode.com/gh_mirrors/52/52-technologies-in-2016

前言

在现代前端开发中，模块化已经成为不可或缺的一部分。本文将深入探讨Webpack这一强大的模块打包工具，它不仅能解决JavaScript模块化问题，还能处理各种静态资源，是现代前端工程化的核心工具之一。

为什么需要Webpack？

传统前端开发的痛点

全局命名空间污染：所有脚本都共享全局作用域
手动管理依赖：需要按正确顺序引入多个script标签
缺乏模块系统：浏览器原生不支持CommonJS或AMD模块
构建流程分散：需要多个工具(Grunt/Gulp/Bower等)配合使用

Webpack的解决方案

Webpack作为一个全能型构建工具，提供了：

模块打包能力
资源统一管理
代码分割
热更新等现代化功能

Webpack核心概念

1. 入口(Entry)

Webpack构建的起点，通常是一个主JavaScript文件。Webpack会从这个文件开始分析项目依赖。

2. 输出(Output)

告诉Webpack在哪里输出打包后的文件，以及如何命名这些文件。

3. 加载器(Loaders)

Webpack原生只能处理JavaScript，加载器让Webpack能够处理其他类型的文件，如CSS、图片等。

4. 插件(Plugins)

用于执行范围更广的任务，从打包优化到资源管理等。

实战：从零配置Webpack项目

1. 基础环境搭建

首先确保已安装Node.js，然后全局安装Webpack：

npm install -g webpack

创建项目并初始化package.json：

mkdir webpack-demo && cd webpack-demo
npm init -y

安装项目依赖：

npm install --save jquery underscore
npm install --save-dev webpack

2. 创建项目结构

webpack-demo/
  |- /dist
  |- /css
  |  |- style.css
  |- /js
  |  |- timeline.js
  |  |- profile.js
  |- index.html
  |- package.json
  |- webpack.config.js

3. 编写模块代码

timeline.js模块：

var $ = require('jquery');
var _ = require('underscore');

function timeline(user) {
  this.setHeader = function() {
    $("#timeline").text(user.name + " Timeline");
  }

  this.setTimeline = function() {
    _.each(user.messages, function(msg) {
      var html = "<li><div class='timeline-heading'><h4 class='timeline-title'>"+msg+"</h4></div></li>";
      $(".timeline").append(html);
    });
  }
}

module.exports = timeline;

profile.js主文件：

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

var timeline = require('./timeline.js');
var user = {
  name: "技术探索者",
  messages: [
    "你好",
    "再见",
    "晚安"
  ]
};

var timelineModule = new timeline(user);
timelineModule.setHeader();
timelineModule.setTimeline();

4. 配置Webpack

创建webpack.config.js：

module.exports = {
  context: __dirname,
  devtool: "source-map",
  entry: "./js/profile.js",
  output: {
    path: __dirname + "/dist",
    filename: "bundle.js"
  },
  module: {
    loaders: [
      {test: /\.css$/, loader: 'style!css!'}
    ]
  },
  devServer: {
    inline: true,
    port: 8080
  }
}

5. 运行Webpack

开发模式（带监听）：

webpack -w

生产模式（最小化）：

webpack -p

启动开发服务器：

webpack-dev-server

Webpack高级特性

1. 代码分割(Code Splitting)

对于大型应用，可以将代码拆分成多个块，按需加载：

require.ensure(['./module'], function(require) {
  var module = require('./module');
  // 使用模块
});

2. 热模块替换(HMR)

无需完全刷新页面即可更新模块：

if (module.hot) {
  module.hot.accept('./module', function() {
    // 模块更新时的回调
  });
}

3. 多入口配置

entry: {
  app: './src/app.js',
  vendor: './src/vendor.js'
},
output: {
  filename: '[name].bundle.js'
}

常见问题解决方案

1. 处理图片资源

安装file-loader：

npm install --save-dev file-loader

配置：

{
  test: /\.(png|jpg|gif)$/,
  loader: 'file?name=images/[name].[ext]'
}

2. 使用Babel转译ES6

安装Babel相关依赖：

npm install --save-dev babel-loader babel-core babel-preset-es2015

配置：

{
  test: /\.js$/,
  exclude: /node_modules/,
  loader: 'babel',
  query: {
    presets: ['es2015']
  }
}

3. 提取CSS到单独文件

安装extract-text-webpack-plugin：

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

配置：

var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  // ...
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('styles.css')
  ]
}