认识 Webpack

• 理解webpack的作用
• 打包。把多个文件打成个数更小的文件。
• 支持模块化
• 优化: 代码压缩,加密

现代 javascript 应用程序的 静态模块打包器 (module bundler)

• 静态: 文件资源
• 模块: node环境, 引入文件, 遵守模块化语法

除了合并代码, 还可以翻译和压缩代码

• less/sass     -> css
• ES6/7/8       -> ES5
• html/css/js -> 压缩合并

操作顺序

1. 安装node
2. 用npm init 初始化项目(如果已经有package.json，则跳过这一步)
3. 在当前项目中安装并使用webpack

任意新建一个空文件夹，取名为webpack-demo,其他名字都成，进入到文件夹内部，

用   npm init -yes 命令来生成一个package.json

 

 

说明：

• 在一个html中引入多个js文件，并且要注意它们的顺序关系。
• script代码在body的底部，这样可以确保是dom节点渲染在js代码执行之前。

因为在index.js要用到tool.js的功能，所以还在index.html中同时引用了index.js和tool.js，并把tool.js的引用放在index.js的引用之前。如下整个代码的示意图：

上面的代码中有如下问题：

• js文件之间有先后的引用的关系：由于index.js中引用了tool.js的，所以必须要把tool.js放在index.js的前面。
• 存在变量污染的情况：一个文件中定义的变量，在另一个文件中可能会被修改，覆盖。
• 随着.js文件个数增加，则项目会越来越不好管理。

解决思路：模块化 + webpack打包

 

 

安装webpack

webpack是一个工具，对于所有的项目都可以来使用，从这个意义上来讲，它是可以去全局安装的，但是，考虑到不同的项目中可能使用了不同的webpack版本，所以不推荐大家去全局安装。特别是打开一个老项目时，一定要注意一下它的webpack的版本号。

前端很多悲惨故事，都是是从版本不一致开始的。

采用局部安装的方式来安装它，注意，它只是一个开发依赖，并不是生产依赖，所以在命令行中加上-D。

npm i webpack webpack-cli -D   

验证webpack是否安装成功

# 方式一：
node_modules\.bin\webpack -v
# 方式二：
npx webpack -v

注意：

• 由于webpack并不是全局安装的，所以并不能直接使用webpack -v来做检验。
• npx是npm5.2之后提供的新功能。可以通过npx -v来检测它的版本。 在这里，我们通过它来调用项目安装的模块，它在运行时会在node_modules/.bin中去检查命令是否存在。

webpack作为一个独立的工具，它与具体的项目无关。在你的项目中，通过开发依赖安装它

修改用模块化的方式来改写代码

以模块化的方式来修改：

• 在tool.js中导出模块
• 在index.js中使用模块

在tool.js导出模块

它用来提供一个方法，供其它模块来使用。这里使用commonjs规范（就是node.js中的导出模块的方式）导出工具方法。

在tool.js 里面书写 +号就是本次添加的内容

const updateDom = (id, content) =>{
    window.document.getElementById(id).innerHTML = content
}
+ module.exports = {
+  updateDom
+ }

在index.js中导入模块

在index.js中引入tool.js中的定义的方法。注意，这里已经涉及到了在一个js中引用另一个js

在index.js 书写  +号就是本次添加的内容

+ const { updateDom } = require('./tool')
updateDom ('app','index.html-小饿小困')

由于现在在index.js使用了require这种模块化的处理方式，所以它无法直接在浏览器中使用，如果直接在index.html中引用，浏览器会报错。

我们接下来就需要使用webpack命令来对index.js进行处理了。

用webpack来做打包

命令格式是：npx webpack 文件名

这里的操作是：

npx webpack ./index.js
# 或者是
node_modules/.bin/webpack index.js

如果是这个样式的说明打包已经成功  index.js和tool.js已经合成了一个main.js文件了。

会在dist 文件夹中 自动生成一个 main.js

吧打包完成的main.js  引入  index.html

  <!-- 引入打包后的.js文件 -->
    <script src="./dist/main.js"></script>

好了 现在可以打开 index.html    

小结

1. 为啥要用webpack?

1. 1. 有效处理模块化。默认情况下，浏览器并不支持模块化，而我们的前端项目又使用了模块化，有了webpack之后，就可以突破这个限制了。
   2. webpack可以把多个相互引用的.js文件打包成一个文件，且文件有加密，压缩的效果，上线更安全。

1. 这个过程中nodejs起了什么作用？

1. 1. 它是webpack的运行基础，没有了nodejs环境，就无法做类似于文件读写的操作了。
   2. 最终生成的main.js并不是在nodejs环境中运行的，整个的项目效果还是在浏览器中运行的。