webpack入门教程之渐入佳境

webpack admin 暂无评论

引言&目标

webpack可以帮助我们打包我们的代码。

什么是打包

打包主要是针对前端开发来说的,打包主要干了下面三件事:

第一是帮助我们合并文件:在前端开发当中,我们需要编写多个js文件,有的时候还需要引用第三方的js文件,webpack可以吧这些js文件合并成一个js文件,这样我们在页面当中就可以只写一个


语句,就可以加载到整个站点所需要的js代码了。

当然对于css文件,webpack也是可以进行合并的。

第二是能够帮助我们压缩代码:webpack在合并js文件之后,会自动的吧我们的js文件中的多余的空格去掉,把比较长的变量名改成短的名称,把注释去掉等等等等,从而能够让我们的代码身轻如燕,浏览器在加载的时候,更加的心情舒畅。

第三,也是最总要的一点,就是能够帮助进行模块化编程,具体来说呢,就是我们可以使用es6中给我们提供的模块加载机制,可以使用require、export、import这些高大上的语法。

webpack如何使用

首先是吧webpakc安装一下,来到webpack的官网,点击documentation然后来到安装页面,这里安装的话,需要执行

npm install webpack -g

然后webpack会以迅雷不及掩耳盗铃之势被安装到全局目录当中。

那接下来,我们使用webpack打包两个js文件到一个js文件中。

我们首先创建一个目录,webpack,在这里我们分别创建两个js文件,file1.js和file2.js,然后我们使用atom编辑起来进行编辑,对于file1,我们导出一个变量

'use strict';
exports.name = 'zhangsan';

然后对于file2.js文件,我们来引用file1,并将file1中的名字显示到浏览器中

'use strict';
const file1 = require('./file1.js');
document.write(file1.name);

好现在两个js文件都准备好了,然后我们尝试着将两个文件打包成一个文件

webpack file2.js bundle.js

好的看见几个绿色单词,说明我们已经打包好了,那这里有几个问题要处理一下。

首先,我们使用webpack打包的时候时想打包file1.js和file2.js,为什么这里我只写了一个file2.js文件呢?

这是因为,在file2中我们使用require引用了file1文件,当webpack打包file2.js文件的时候,它突然发现,你还require了file1,那么就会把file1合并到file2当中,所以这边我们只需要写file2就可以了。

第二个问题,就是这个bundle.js是什么? bundle是包裹的意思,bundle.js就是指打包后的代码,长什么样子呢,我们可以使用atom查看一下,可以看到,打包后的代码,看不懂,但是会给人感觉很厉害的感觉。

有了bundle.js文件后,我们就可以在html文件中使用这个js文件查看一下效果了。 创建一个index.html文件,然后在body中引用bundle.js文件,当我们在浏览器中加载index.html文件的时候,可以看到,zhangsan被成功的打印了出来。

然后我们尝试,在讲一个css文件打包到bundle.js文件当中去。

我们编写一个css文件style1.css

body {
  background: #ff0000;
}

然后我们再一次的打包,可以看到出现了一堆错误,为什么呢?

webpack的工作原理

webpack在打包的时候,可以分为两部分,一部分是合并文件,另外一部分是加载解析文件【此处应有图】,不同的文件需要使用不同的加载器来进行加载和解析,然后再由webpack来进行统一的打包。

那有的同学可能会问,为什么刚刚打包两个js文件的时候没有使用加载器,也成功了了,原因是当我们安装了webpack的时候,它默认会自带一个js文件的加载器,所以刚刚打包js文件成功了。

现在出现了一个css文件,当webpack打包的时候,没有找到合适的加载器去加载css文件,所以我们可以看到,在错误信息中出现了 You may need an appropriate loader to handle this file type.,没有办法去正确的加载css文件。

那么我么所要做的事情就是安装合适的css加载器,在这里我们小安装两个加载器

npm install css-loader style-loader;

然后我们还需要特别的告诉webpack,当你在加载css文件的时候,需要使用刚刚安装的加载器,怎么做呢?

我们只需要在require的时候,特别的标注一下

require('!style!css!./style1.css');

然后再一次的打包。

可以看到,出现了磬人心脾的绿色小字,说明我们打包成功了。

然后我们来看一下效果,页面变红了,说明css文件生效了。

如何让加载css文件更优雅

为了使用合适的loader去加载css文件,我们写了require('!style!css!./style1.css');,这种代码看起来非常的不优雅,我们可以使用模块绑定的方式,来简化这种写法,具体来说呢,是是先将require里面的多余代码先去掉,这个时候打包肯定报错,为了不报错,那么我们需要告诉webpack当遇到css文件的时候,使用何种加载器:

webpack file2.js bundle.js --module-bind 'css=style!css'

其中,--module-bind css=style!css就是告诉webpack,使用css-loader和style-loader去加载后缀名为css的文件

可以看到,也是可以打包成功的。

如何避免每次都写模块绑定

如果使用模块绑定的话,那么我们需要每次打包的时候,都要敲模块绑定的命令,如果所需要的加载器比较多,那么这个模块绑定的命令也会很长,很不好看。

怎么可以让命令更加的简洁一点呢?

我们可以使用webpack给我们提供的配置文件。

具体来说呢,我们首先创建一个webpack.config.js文件,

module.exports = {
  entry: './file2.js',
  output: {
    path: __dirname,
    filename: 'bundle.js',
  },
  module: {
    loaders: [
      {test: /\.css$/, loader: 'style!css'}
    ]
  }
}

然后再次运行一下打包命令,注意这个时候我们就不需要模绑定命令了。

成功了,是不是非常的优雅?

es6加载器

那么到目前为止,还有一件事情我们需要处理一下,就是,我们的js使用的还是es5的语法,如果能够使用es6的语法的话,是不是更加的优雅一点呢?

比如在file1.js文件中,我们可以通过exprot来导出name变量。

const name = 'zhangsan';
export {name};

然后在file2中,我们使用import来导入文件

import {name} from './file1';
import './style1.css';
document.write(name);

这个时候使用webpack来打包,虽然不会报错,但是打包的bundle.js文件中,其实并没有正真的的吧我们需要的file1.js和style1.css文件合并到里面去,为什么会出现这种情况呢?

因为webpack在打包的时候使用的是es5的语法,对于import这个关键字来说,压根就不认识,也就没有办法去加载相应的文件了,那怎么办呢?

我们刚刚说webpack使用的是加载器去加载文件,对于使用了es6语法的fiel1和file2文件来说,我们可以使用特别针对于es6文件的加载器来进行加载和转换,就可以了。

那这边我们需要做两件事情,首先安装es6加载器和转换规则

npm install babel-loader babel-preset-es2015

第二部,我们需要在配置文件中配置,告诉webpack在加载使用es6语法的js文件的时候,使用何种加载器

{test: /\.js$/, loader: 'babel', query: {presets: 'es2015'}},

然后我们再进行打包。打包完成浏览器预览index.html效果可以看到,运行的很完美。此文章到这里就暂告一段落。

转载请注明:React教程中文网 - 打造国内领先的react学习网站-react教程,react学习,react培训,react开 » webpack入门教程之渐入佳境

喜欢 ()or分享