webpack学习笔记

Demo01: Entry file

组织架构如图,css

 
demo01

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

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

module.exports = {webpack

  entry: './main.js',web

  output: {npm

    filename: './bundle.js'json

  }架构

};app

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

运行   cd  demo01,而后npm run dev便可

Demo02: Multiple entry files

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

 
demo02-1

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

直接看index.html文件,

 
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文件,如图

 
demo02-3

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

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

 
demo02-4

   搞定,猜测正确。

Demo03: Babel-loader 

先上结构图:

 
demo03-1

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

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

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

main.jsx 是一个JSX文件。

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

 
demo03-2
 
demo03-3
 
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;

}

 
demo04-1
 
demo04-2

注意,您必须使用两个加载器来转换CSS文件。首先是CSS-loader来读取CSS文件,另外一个是样式加载器将<style>标签插入HTML中。

运行,npm run dev,一切正常。

不过我想改写一下,想把main.js改写成一个JSX文件。一块儿来试试。

1. 首先改造html,加个带命名ID的控件div。

2. 写个JSX文件,如图main1.jsx。

3. 修改webpack配置文件,添加对应的module.rules。依次以下方图:

 

 
demo04-03
 
demo04-04
 
demo04-05

注意几点:

1. 在html中,若是bundle.js在控件以前引入,会不显示内容。位置不可引错。缘由是由于给控件赋值操做实际上是编译在bundle.js里面的,所以必须放置控件以后。

2. 在JSX文件中的写法不一样于demo03的写法,要注意。

做者:陈大冲 连接:https://www.jianshu.com/p/080e18fcf0e3 來源:简书 简书著做权归做者全部,任何形式的转载都请联系做者得到受权并注明出处。
相关文章
相关标签/搜索