Fork me on GitHub

webpack入门

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

webpack最简单的3招开始介绍，即拆分、打包、压缩。

步骤

1.传统项目中的问题

在不依赖任何自动化、模块化工具的项目中，通常我们的代码是这样的：

index.html

复制代码
<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.js

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

main();

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

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

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

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

所以为了解决以上问题，我们需要使用webpack来实现一些改变。

2.准备

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

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

为了改进上方传统项目中的不足，我们这里还需要安装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

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.打包

其实在上面我们已经使用了打包命令，其中的app/index.js即为打包的入口文件，而dist/bundle.js为输出文件。

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

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

也可以直接运行简化的命令：

webpack

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

6.压缩

而如果我们需要对打包后的代码进一步压缩处理，我们可以运行命令：

webpack -p

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默认启用，所以无需进行配置。

posted @   cosyer  阅读(284)  评论(0)  编辑  收藏  举报
编辑推荐：
· 从二进制到误差：逐行拆解C语言浮点运算中的4008175468544之谜
· .NET制作智能桌面机器人：结合BotSharp智能体框架开发语音交互
· 软件产品开发中常见的10个问题及处理方法
· .NET 原生驾驭 AI 新基建实战系列：向量数据库的应用与畅想
· 从问题排查到源码分析：ActiveMQ消费端频繁日志刷屏的秘密
阅读排行：
· C# 13 中的新增功能实操
· Ollama本地部署大模型总结
· 【杭电多校比赛记录】2025“钉耙编程”中国大学生算法设计春季联赛（4）
· langchain0.3教程：从0到1打造一个智能聊天机器人
· 2025成都.NET开发者Connect圆满结束
点击右上角即可分享
微信分享提示
AI原生IDE
❄
大哥哥的
menu