在学习 vue 框架的时候,一开始使用的是在页面中导入 <script> 标签的方式去学习.
后来接触到了 .vue 模板开发的模式,就接触到了 vue-cli.
于是自然而然的就接触到了 webpack.
自己看了很多关于
webpack的文章以及文档.
发现很多时候,对方只是告诉你该怎么配置.
有时候,按照一些博客的办法,把
webpack配置跑通了,但是仍然是一面迷茫.
不知道这些配置加与不加,之前又没有什么区别.
以前写过一段时间的前端,那个时候,仅仅只是 HTML + CSS + JAVASCRIPT,它们都是运行在浏览器里面的.
所以理解起来并不麻烦.可以很快上手.
但是现在的前端开发,特别是使用了像 vue , react 这样的框架,以前那种 HTML+CSS+JAVASCRIPT的方式,也仅仅只能写一些DEMO.用于学习了.
一来现在的SPA(single page application),变的越来越复杂.
二来上述框架都是基于组件开发的.
所以,如果在一个HTML页面中,使用<script>方式开发是完全不可能的.那一个页面得有多大,所有组件代码都糅杂在一个html,或者js文件里(其实webapck就是这么做的),开发和维护难度指数上升.
什么是 webpack ?
个人理解:
webpack 是一个基于
Node.js运行环境,用于打包本地文件之间相互依赖并最终输出成单个文件的工具.
就像npm工具可以下载安装包一样.
什么是文件间相互依赖?
在 NODE.JS 中,功能是按模块分布的.
比如有 a.js b.js c.json 三个文件
//b.js
module.exports = {
data:'b模块的数据'
}
// c.json
{
"data":"require()也可以导入一些json文件并解析成一个对象"
}
// a.js
const b = require('./b')
const json = require('./c.json')
console.log(b.data,json.data)
输出
b模块的数据 require()也可以导入一些json文件并解析成一个对象
这里的依赖关系则是:
模块间的关系依赖.jpg
这就是所谓的模块之间的相互依赖.
这样式在之前的前端的开发模式中可能就是.
<script src='b.js'></script>
// json还没办法导入
<!--<script src='b.js'></script>-->
<script src='a.js'></script>
有两个 <script> 标签.可能还需要一个异步请求请求 c.json的数据.
如果 b.js 或者 a.js 中定义了全局重名的变量,甚至会造成变量全局污染.
使用 webpack 能解决上述的问题吗?
不管是 a.js,b.js,c.json 还是真实工作中的N多模块依赖.
最终都是希望能够在浏览器中运行的.(除非写的是 node.js 后台程序)
能够想到了一点是,如果能把 a.js,b.js,c.json的代码写到一个 js 文件中,且相互之间不影响原有的功能.起码在浏览器请求的级别,就只用发送一个http请求了.
这个在肯定是可以实现的,但是如果让我们自己写,可能就太费劲了.
webpack大显神威的时候就到了.
webpack能够帮助我们解决模块之前相互依赖的问题.并把多个相互依赖的js文件生成一个js文件.
全局安装webpack.
npm i -g webpack@3.1.0
安装完毕之后,在终端输入
webpack --version
出现如下版本号(3.1.0)就说明 webpack 已经成功的安装到全局目录中了.
webpack全局安装成功
然后将终端目录切换到 a.js文件所在的目录.
并键入命令 webpack a.js b.bundle.js.
其中 a.js 就是webpack打包文件的入口文件.
a.js中依赖了 b.js 和 c.json .
但是webpack就帮助我们管理这些依赖,并最终生成b.bundle.js
webpack将a.js b.js c.json 打包成一个 bundle.js文件
我们之前 a.js 的输出结果是
b模块的数据 require()也可以导入一些json文件并解析成一个对象
既然webpack帮我将这个几个js文件全部打包成了一个文件.别的不说,我运行 node b.bundle.js 输出也应该是 b模块的数据 require()也可以导入一些json文件并解析成一个对象
所以,简单的理解一下.
webpack,从一个入口文件开始,找到所有的模块之前的相互依赖,并最终生成一个js文件.
webpack使用配置文件跑一次上述的demo
上述的webpack命令是
webpack a.js b.bundle.js
其实也还好,不是很长.
但是如果我们查看 webpack 的参数列表
webpack 参数列表
就发现,webpack命令其实有很多参数可以指定.
假如我现在对这些参数都非常熟悉,需要用到里面的很多功能,那么参数,一个个指定肯定是又费时又容器出错.
于是,可以利用 npm run 脚本的方式来运行比较复杂的 webpack 命令.
使用 npm init ,在当前目录初始化一个 package.json 的文件.
npm init 创建 package.json文件
在此文件的 script 节点中添加 webpack a.js b.bundle.js
添加脚本命令
直接在终端运行 npm run build
npm run build
webpack使用配置文件
有时候,在package.json 的 scripts 标签中写太多的配置,也是一个很费事的事情.
于是,还可以使用 配置文件来启动webpack,帮我们编译打包文件.
通过 webpack --help 可以查看到 webpack 默认的配置文件是 webpack.config.js or webpackfile.js
webpack.config.js & webpackfile.js 是webpack命令的默认配置文件名字
我们这里就使用 webpack.config.js 来作为 webpack 启动的配置文件.
在先创建 webpack.config.js 文件之前,想想,配置这个文件需要做什么?
我们之前执行的命令是 webpack a.js b.bunlde.js .
就是指定一个输入文件 a.js ,指定一个输出文件 b.bundle.js
所以,在webpage.config.js 文件里,我们需要至少需要配置这两项.
webpack.config.js配置代码如下
const path = require('path')
module.exports = {
entry: path.join(__dirname,'a.js'), // 指定入口文件
output: {
filename:'bundle.js', // 指定输出文件的名字
path:path.join(__dirname,'/dist') // 指定文件的输出文件夹
}
}
然后再 package.json 的 scripts 标签里添加一行脚本
15507563251056.jpg
接着在终端运行 :
npm run build
15507565004680.jpg
到目前为止,对webpack的作用有了一个大致的清晰的认识了.
webpack以一个js文件为入口,找到对应的所有依赖,并根据打包成一个js文件.
网友评论