webpack入门必知必会

时间 2019-11-06

标签 webpack 入门必会繁體版

原文原文链接

关于

微信公众号：前端呼啦圈（Love-FED）
个人博客：劳卜的博客
知乎专栏：前端呼啦圈

前言

这是我第一篇介绍webpack的文章，先从一个入门教程开始吧，后续会有更多相关webpack的文章推出。javascript

首先什么是webpack？若是说它是一个打包工具那真的是有点大材小用了。我我的认为webpack是一个集前端自动化、模块化、组件化于一体的可拓展系统，你能够根据本身的须要来进行一系列的配置和安装，最终实现你须要的功能并进行打包输出。html

本文做为一篇入门教程，这里先从webpack最简单的3招开始介绍，即拆分、打包、压缩。前端

步骤

1.传统项目中的问题

在不依赖任何自动化、模块化工具的项目中，一般咱们的代码是这样的：java

index.htmlnode

<html>
  <head>
    <title>传统项目</title>
    <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
  </head>
  <body>
    <script src="app/index.js"></script>
  </body>
</html>复制代码

app/index.jsjquery

function main() {
    $('body').html('hello world!');
}

main();复制代码

以上示例中，脚本之间存在着隐式依赖关系。webpack

index.js取决于被包括在页面运行以前的jQuery，它只是假设有一个全局变量$的存在。web

这样管理JavaScript项目有一些问题：npm

若是依赖项丢失，或者包含在错误的顺序中，应用程序将不会运行。
若是包含依赖项但没有使用，那么浏览器必须下载不少没必要要的代码。json

因此为了解决以上问题，咱们须要使用webpack来实现一些改变。

2.准备

首先咱们得在项目中安装webpack，咱们打开命令行工具运行：

mkdir demo && cd demo // 新建demo文件夹并打开
npm init // 初始化npm，生成package.json配置文件
npm install --save-dev webpack@beta // 安装webpack2.0版本，mac系统可能须要添加sudo命令复制代码

以上使用的npm命令须要安装node.js，能够点击这里安装便可：node.js

为了改进上方传统项目中的不足，咱们这里还须要安装jQuery：

npm install --save jquery // 安装jQuery复制代码

3.改变

改变后的index.js

var $ = require('jquery');

function main() {
    $('body').html('hello world!');
}

main();复制代码

这里咱们能够直接在index.js里引用jQuery，index.js明确要求jQuery的存在，这样就不存在隐式依赖的问题（没有全局污染）。

改变后的index.html

<html>
  <head>
    <title>webpack项目</title>
  </head>
  <body>
      <script src="dist/bundle.js"></script>
  </body>
</html>复制代码

这里咱们的index.html文件只引入了最终打包后的bundle.js。如今运行webpack命令将index.js输出为bundle.js。

运行命令：webpack app/index.js dist/bundle.js

webpack app/index.js dist/bundle.js
Hash: 3bb91a6dedfc2a2a1c08
Version: webpack 2.2.0-rc.4
Time: 397ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  270 kB       0  [emitted]  [big]  main
   [0] ./~/jquery/dist/jquery.js 267 kB {0} [built]
   [1] ./app/index.js 83 bytes {0} [built]复制代码

最终咱们在浏览器中打开index.html页面能够看到输出的“hello world!”。

4.拆分

如今若是咱们index.js中的"hello world!"字符串须要放到另一个hello.js中，而后在index.js中引入使用的话，这就涉及到webpack模块拆分的功能。

app/index.js

var $ = require('jquery');
var str = require('./hello.js');

function main() {
    $('body').html(str);
}

main();复制代码

app/hello.js

var str = 'hello world!';

module.exports = str;复制代码

咱们在hello.js中经过module.exports导出str变量，而后在index.js经过require导入一样能够实现浏览器中输入“hello world!”的效果，固然咱们须要从新运行下webpack命令：webpack app/index.js dist/bundle.js

5.打包

其实在上面咱们已经使用了打包命令：

webpack app/index.js dist/bundle.js复制代码

其中的app/index.js即为打包的入口文件，而dist/bundle.js为输出文件。

可是咱们会发现这样的命令不利于咱们复杂项目配置的使用，对于更复杂的配置，咱们能够利用配置文件webpack.config.js来统一管理。

咱们能够在demo文件夹下新建webpack.config.js配置文件：

var path = require('path');

module.exports = {
  entry: './app/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}复制代码

上方配置中的entry就是咱们的入口文件，能够有多个入口文件，而output即为webpack打包的输入对象，filename为输出文件名，path为输出路径。

如此咱们运行命令行：

webpack --config webpack.config.js复制代码

一样能够生成打包目录dist及打包文件bundle.js。

固然你也能够直接运行简化的命令：

webpack复制代码

webapck会自动去寻找当前目录下的webpack.config.js文件。

6.压缩

上一步咱们利用webpack命令将多个多件打包到了一个bundle.js的文件中，可是并未进行压缩，你能够打开bundle.js进行查看。

而若是咱们须要对打包后的代码进一步压缩处理，咱们能够运行命令：

webpack -p复制代码

这时咱们能够来进行下打包和压缩的文件大小对比

打包命令：webpack

webpack
Hash: ab4a1091f0880100eab0
Version: webpack 2.2.0-rc.4
Time: 387ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  270 kB       0  [emitted]  [big]  main
   [0] ./app/hello.js 50 bytes {0} [built]
   [1] ./~/jquery/dist/jquery.js 267 kB {0} [built]
   [2] ./app/index.js 114 bytes {0} [built]复制代码

输出的bundle.js整个文件大小为270 kB。

压缩命令：webpack -p

webpack -p
Hash: ab4a1091f0880100eab0
Version: webpack 2.2.0-rc.4
Time: 1967ms
    Asset     Size  Chunks             Chunk Names
bundle.js  88.3 kB       0  [emitted]  main
   [0] ./app/hello.js 50 bytes {0} [built]
   [1] ./~/jquery/dist/jquery.js 267 kB {0} [built]
   [2] ./app/index.js 114 bytes {0} [built]复制代码

输出的bundle.js整个文件大小为88.3 kB。

很明显，文件被压缩了。

7.进一步压缩优化

上方咱们经过webpack的压缩命令将文件打包并压缩了，可是对于webpack -p压缩后的文件来讲其实还有压缩的余地。若是你使用的是webpack1.0，那么你能够在配置文件中添加plugins配置项，而且加入以下插件：

var webpack = require('webpack');

module.exports = {
    ...
    plugins:[
        // 去除代码块内的告警语句
        new webpack.optimize.UglifyJsPlugin({
          compress: {
            warnings: false
          }
        }),
        // 优先考虑使用最多的模块，并为它们分配最小的ID
        new webpack.optimize.OccurenceOrderPlugin()
    ]
    ...
}复制代码

而本示例中使用的是webpack2.0版本，在2.0中UglifyJsPlugin的compress选项默认为false，而且OccurrenceOrderPlugin默认启用，因此无需进行配置。

结语

本文主要介绍了webpack入门的一些简单命令和基本配置信息，从代码拆分、打包、压缩的角度和传统的前端项目进行对比，但愿以此加深你们对webpack基础知识的印象。

若是以为本文对你有帮助，能够关注个人微信公众号，来这里聊点关于前端的事情。

1. webpack入门必知必会
2. webpack必知必会
3. docker基础入门之必知必会
4. Django入门必知必会操做
5. SQL入门经典+SQL必知必会
6. Redis入门必知必会超详解
7. NLP入门必知必会(一)：Word Vectors
8. Python 入门必会知识
9. webpack入门--前端必备
10. WSGI必知必会
更多相关文章...
• PHP 表单 - 必需字段 - PHP教程
• Memcached入门教程 - NoSQL教程
• YAML 入门教程
• Java Agent入门实战（一）-Instrumentation介绍与使用