大家好,我是被白菜拱的猪。
一个热爱学习废寝忘食头悬梁锥刺股,痴迷于girl的潇洒从容淡然coding handsome boy!
文章目录
一、写在前言
不知不觉Vue的学习已经进入第八天,回顾前几天的学习,不得不承认学习效率之低,在黑暗中摸索前行,决定改变学习方法,之前是看一下视频,然后自己敲一下。现在决定学完一大个知识点,然后回顾内容,在重新按照脑海中的记忆,自己独立的敲一遍,脑子只有越用越灵光,仅仅看视频是不行的。写到这里,又想睡觉了,我真的是服了自己了,每天的效率真的是想象不到的低啊,不过还好,总比啥也不学强。在每一天的学习的过程中,肉也多了,屁股也大了,人变得跟猥琐了,仿佛看到了我日后继续单身十年的日子,不愧是the King of single dog!
让我们拉开神秘的面纱,走进webpack的殿堂。
二、webpack详解
(一)认识webpack
什么是webpack?
本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。
这是中文官网的原话,读起来是不是非常的抽象,核心就是四个字“模块”“打包”下面这张图就是截取中文官网的首页。webpack就是打包所有的资源。
前面我们将了为什么要模块化开发,而webpack就是配合我们能够更好的模块开发,它能够将我们开发的各种资源能够打包成一个包,在HTML中使用。另外还可以对资源进行处理,例如假如我们使用ES6语法编写的程序,有些浏览器不支持,webpack可以将其转化为ES5然后在浏览器中运行,除此之外可以对图片进行压缩,将TypeScript转化为JavaScript。
所以有了webpack,我们更好的进行模块化开发。
(二)webpack的安装
首先webpack是依赖Node.js的,我们安装webpack的第一步是看看我们是否已经安装了Node.js。在终端窗口敲入node -v来查看。没有的话在官网上下一个就可以了。
然后使用npm install webpack@3.6.0 -g 全局安装webpack,这里使用@3.6.0是因为视频后面介绍的vue cli2依赖该版本。
当然除了全局安装还有局部安装,局部安装的命令是 npm install webpack@3.6.0 --save-dev
dev即development 开发版
(三)webpack的起步
既然安装好了,那么让我们用起来吧。在具体使用之前,先介绍一下我们真实开发过程中工程目录的层级结构。
dist是放我们打包过后的文件。src是放我们的源文件,main.js是我们的入口文件。index.html是我们在浏览器展示的页面。他与dist,src是同一级。
然后我们在aaa.js 和info.js写代码。然后在main.js 中引入
那么如何打包呢 使用webpack命令。
webpack ./src/main.js ./dist/bundle.js
显示这个就代表打包成功,然后在index.html文件引入dist里面的bundle.js就ok了。
<script src="./dist/bundle.js"></script>
下面总结一下:
在真实开发中,我们只用引用一个js就ok了,不用一个一个引用。这就是webpack的好处。
(四)webpack的配置
1、指定一个默认的入口与出口
在经过上面演示之后,我们在想,每次使用
webpack ./src/main.js ./dist/bundle.js
这条命令,我们要指明打包哪个文件以及打包成哪个文件,这样就很麻烦,那么能不能直接给他一个默认的入口与出口呢。
这时候我们需要创建一个webpack.config.js文件,注意名字必须一摸一样,不能自我发挥,内容如下:
注意output要求是一个绝对路径,否则会报错。那么如何动态的获取绝对路径呢,这时候我们要借用node包里面的path,那现在没有啊,没有我们就是用 npm init 安装,__dirname是当前文件所在文件夹的绝对路径。
最后生成了package.json文件。
最后直接使用webpack命令就可以打包。
2、npm run build
将npm run build与webpack映射,即使用npm run build 相当于使用webpack。为什么要这么做腻,因为在后续的开发中单纯使用webpack命令后面会有很多参数,不太方便。
如何配置的,打开package.json文件,如图所示,添加命令。
而且在改文件使用webpack时,会优先寻找啊本地的webpack。在实际开发过程中,每一个项目都有一个本地的webpack,而且使用的也是本地的,因为会出现全局的和本地的版本不一致的情况。假如直接输入webpack,它是用的是全局的。
3、局部安装局部webpack
比如我们在github中下载项目,别人用的是3点几的webpack打包的,而我们全局的版本的是4点几,那我们在继续打包的时候就会可能出现错误。
本地webpack安装指令:
npm install webpack@3.6.0 --save-dev
(五)loader的使用
什么是loader?下面截取官网上的对其的解释。
同样是不仔细揣摩看不懂系列,那就让利哥的大白话给你解释解释什么是loader。在我们前面的演示中,我们仅仅使用webpack对js文件进行了处理,webpack会自动处理js文件之间的依赖。但是我们敲代码不仅仅只有js文件还有css文件,图片。还有可能要将ES6转为为ES5等等。这些对于webpack本身是做不到的,所以找了一个好兄弟帮帮他,这位大兄弟的为名字就叫做loader。
loader的使用大体分为两个步骤。
这里我们怎么知道需要什么loader呢,我们可以通过官网去查阅即可。
好了那我们看看loader针对不同文件是如何使用的吧。
1、CSS文件处理
我们按照步骤一步步的来
(1)创建css文件
这里我选择将文件颜色改成红色,寓意着我买的基金一路飙红。
body{
background-color: red;
}
这样可以直接用吗?不可以,webpack要从入口中查找所依赖的文件,所以我们要在入口中引用它。
(2)在main.js中引用
//css文件
require("./css/ccc.css")
我们先尝试打包,看能不能打包成功。果不其然出错了
错误上说我们需要一个合适的loader。
(3)下载loader
下载什么loader啊,这时候我们就要动动我们的小手指去官网上查一查css文件需要什么loader,然后通过npm命令下载。
官网上说我们需要这两个loader。
npm install style-loader --save-dev
npm install --save-dev css-loader
官网建议我们这两个一定要结合使用,为什么这么说呢?待会见分晓。
(4)配置module于webpack.config.js文件
const path = require('path');
module.exports = {
entry: './src/main.js',
output: {
//获取绝对路径
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
}
};
test是一个正则表达式,表明是一个css文件、
下面说说为什么要style和css-loader结合使用,css-loader只负责加载,意思就是说把它拿过来了,但是没有用它,style-loader是负责渲染,就是把加载过来的css文件使其产生效果。
另外两个的顺序不能变,我们有疑问了不是排在前面的先执行嘛,不是的,在webpack.config.js文件中是从右往左,从下往上加载。所以顺序一定不能写错。
最后我们执行以下npm run build打包一下吧,看页面有没有该效果。
ok,perfect,红的我眼睛都要瞎了,基金啊基金,你能不能像背景一样这么红,说到这里,我的心就如刀割的一样,第一次买基金,结果就赶上大跌,赶巧不巧,还就在峰顶买入!楼顶的风好大,仿佛迷失了自我。
2、less文件处理
步骤同css一样,只不过用的loader不一样,用的是less-loader,这里就不在详细介绍。
// webpack.config.js
module.exports = {
...
module: {
rules: [{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
}]
}
};
3、图片文件处理
详情见
【人生苦短我学Vue】-【DAY08】-webpack详解(2)
三、结束语
未完待续…让我们在下一篇博客中继续叙说webpack的故事