webpack学习笔记(阮一峰教程demo)

学习webpack,直接观看代码理解。将自己的理解过程记录下来,后续若有不同理解,再来修改。

献上阮一峰老师的webpack教程地址: webpack

将整个demo完整的clone下来,用vscode导入整个文件夹之后,发现也只有15个demo而已,小case,so easy,开撸。

Demo01: Entry file

组织架构如图,

webpack学习笔记(阮一峰教程demo)_第1张图片
demo01

bundle.js为自动生成,package.json为配置文件,也不用管。

所以只需要关心三个类型的三个文件,即index.html,main.js,webpack.config.js,见名知意,第一个是html文件,里面加载进去js文件即可;main.js里面包含你想做的事情,demo中打印一句话;剩下的webpack.config.js就是整个webpack工程的配置文件了。

module.exports = {

  entry: './main.js',

  output: {

    filename: './bundle.js'

  }

};

entry是入口,output是输出生成的bundle文件对应关系。

运行   cd  demo01,然后npm run dev即可

Demo02: Multiple entry files

首先运行起来看一眼区别,cd demo02, 然后npm run dev走你。

webpack学习笔记(阮一峰教程demo)_第2张图片
demo02-1

如图,demo02只是比demo01多打印了一句话而已。

直接看index.html文件,

webpack学习笔记(阮一峰教程demo)_第3张图片
demo02-2

如图,demo02只是多加载进来一个js文件而已,打开看看两个JS文件,里面分别只有一句打印一句话的代码而已。略过不提。

package.json文件依旧不管,两个bundle.js文件也不管,两个main.js文件简单的一句话也看过了,那就剩下webpack的配置文件了。代码先粘出来,

module.exports = {

  entry: {     //  入口

    bundle1: './main1.js',    //  第一个JS文件

    bundle2: './main2.js'    //  第二个JS文件

  },

  output: {

    filename: '[name].js'    //   输出文件命名

  }

};

如图可见,在entry里,不再像demo01中那样只有入口文件名,而是两组key-value,value的值都是我们的JS文件名字(带有相对路径),那么,key,我们猜想就是对应生成的bundle文件名了吧。

再看下方的output输出对应关系,filename的值为 [name].js,那么这个name应该就是一个变量,对应的是entry中的key。既然这样,那我们来验证一下。

添加第三个JS文件,main3.js,也随便打印一句话。然后再配置文件中加入配置:

module.exports = {

  entry: {     //  入口

    bundle1: './main1.js',    //  第一个JS文件

    bundle2: './main2.js',    //  第二个JS文件

    bundle3: './main3.js'     //    添加的第三个文件

   },

  output: {

    filename: '[name].js'    //   输出文件命名

  }

};

然后在html文件中引入加载我们生成对应的bundle3.js文件,如图

webpack学习笔记(阮一峰教程demo)_第4张图片
demo02-3

OK,添加完毕,编译,运行。

编译:npm build    运行:npm run dev,

webpack学习笔记(阮一峰教程demo)_第5张图片
demo02-4

   搞定,猜想正确。

Demo03: Babel-loader 

先上结构图:

webpack学习笔记(阮一峰教程demo)_第6张图片
demo03-1

有没有发现JS文件不见了,而多了一个JSX文件(不知道的请百度),有点意思,看看介绍怎么说。

加载器是预处理器,它可以在Webpack的构建过程之前转换你的应用程序的资源文件(更多信息)。

例如,Babel-loader可以JSX / ES6文件转换成标准JS文件,之后Webpack将开始构建这些JS文件。Webpack的官方文档有一个完整的加载器列表。

main.jsx 是一个JSX文件。

先来看几个文件的内容代码:

webpack学习笔记(阮一峰教程demo)_第7张图片
demo03-2
webpack学习笔记(阮一峰教程demo)_第8张图片
demo03-3
webpack学习笔记(阮一峰教程demo)_第9张图片
demo03-4

上面的代码片段使用了Babel-loader加载器,它需要Babel的预设插件Babel -preset-es2015和Babel -preset-react 转换编译es2015和react。

图2这是react 的写法,先引入需要的react和react-dom,然后在render中把指定的内容,显示在ID为wrapper的控件上。

Demo04: CSS-loader 

Webpack允许你在JS文件中包含CSS,然后用CSS-loader来预处理CSS文件。

main.js只有一句话

require('./app.css');

app.css

body {

background-color:blue;

}

webpack学习笔记(阮一峰教程demo)_第10张图片
demo04-1
webpack学习笔记(阮一峰教程demo)_第11张图片
demo04-2

注意,您必须使用两个加载器来转换CSS文件。首先是CSS-loader来读取CSS文件,另一个是样式加载器将