webpack配置及使用

npm：node.js下面的一个模块，里面有很多插件，服务器在国外

cnpm:淘宝创建的一个npm网站的镜像，从里面就可以直接下到npm下的插件，所以我们在dos中下插件一般npm和cnpm开头都行，但是cnpm开头下的更快一些。

 

1,全局安装：

因为都是在c:\user\administrator下安装的东西，所以没有course-webpack文件夹，所以忽略掉所有的course-webpack，直接运行在其后的命令即可

安装完成之后输入 webpack -help通过查看提示信息来检验是否安装完成。

2.在目标标目录下输入 npm init 进行一个npm的初始化，生成一个json文件

然后一路回车，然后再进行一个本地安装，和gulp的本地安装一样的命令

3，本地安装webpack，cnpm install webpack --save-dev

 

打包

1.   在根目录下创建一个entry.js文件里面简单的写点东西

再在根目录下创建一个index页面，并简单的写点东西，并在index里面链入一个js文件，如：bundle.js，这个js文件会通过webpack生成，这是我们的输出文件。同时index里面的id要和entry.js里的id一致

 

2.   输入webpack entry.js bundle.js会 在根目录下生成一个bundle.js的文件,此时在entry.js中你自己写入的业务代码已经打包进了bundle.js中。你可以打开bundle.js文件去查看里面的代码，可以看到你在entry.js中写入的业务代码，在最下面。

此时你打开浏览器看看index，看到个hello就对了

 

3.   在根目录下创建一个name.js文件 在里面定义一个module并暴露，再简写点东西比如：  （course webpack 就是一个字符串，用于拼接到输出内容上，可以随便定义）

 

（webpack就是把在其他js中定义的js文件作为模块，把该js文件在其内使用module.exports暴露接口，然后在entry.js中通过require获取这个接口，就相当于在entry.js中链接到暴露出接口的那个js文件，然后在dos中使用 webpackentry.js bundle.js 命令，把entry.js文件打包扔进bundle.js文件中，这样只需要在html文件中引入bundle.js文件，就可以同时获取到entry.js文件和entry.js中引入的暴露接口的js文件。

暴露接口，引入接口实现模块化，在通过webpack entry.js bundle.js明i功能，把搜集接口的文件中的内容  打包扔入到我们最终要在html文件中要链的那个js文件中，这样这个js文件中就会自动生成你想要的js文件中的所有内容。

这种方法也是引入其他js文件的一种方法，但是就避免了使用往常的script标签引入，这样就  实现了前端优化。）

 

4.   在入口文件entry.js中引入name.js所暴露的借口

./ 文件路径   用于查找到要引入的文件，如果文件名没有后缀，则默认是js类型文件

这里也可以写成require(‘./name.js’)

5.然后输入webpack entry.js bundle.js将入口文件的内容打包进bundle.js，然后在浏览器中打开页面看效果，会看到页面中会生成hellocourse webpack；

 

Css文件的引入

1.这个功能是靠webpack的loader功能实现的。所以我们需要输入：cnpm install css-loader style-loader --save-dev 来安装这两个loader

2.在根目录下创建一个css文件，并写入一些简单的样式如：body{background：red}

3在入口文件中写入引用css的代码

此处的style！和css！是指加载的我们刚才安装的loader

 

这里面！的作用？

4.输入webpack entry.js bundle.js命令，打包到bundle.js，然后查看index网页

说明我们的css已经已经成功的引入，也可以通过查看bundle.js中的代码，可以看到引进了许多模块。

 

 

 

 

 

 

 

Webpack的配置文件

1.   在根目录下创建一个webpack.config.js文件，然后再里面写入webpack的配置，并暴露出去。

loaders就是加载器

这其中由于已经配置好了loader，所以在入口文件entry.js中的引入的两个css和style的loader就可略掉了省略

在entry.js里把

就可以改成

省去了style!css! 配置loader这一步。

 

同时，在命令行中也不用专门写webpack entry.js bundle.js这样的命了，直接输入webpack命令即可，他会根据我们的配置自动去打包到bundle.js中。

2.   输入webpack命令，然后查看index页面

引入成功

 

 

 

 

 

 

 

通过source-map来调试代码

在webpack中必须使用source-map才能够生成这些模块的源文件，才能在浏览中查看源码并进行调试。

浏览器的Sources中我们只能看index.html和bundle.js两个源文件，我们创建的entry.js和name.js是看不到的

1.   输入webpack --devtool source-map

这样就会生成一个source-map

 

2.   回到浏览器查看Sources，会多出一个webpack文件夹，里面就有我们之前创建的文件了并且也是能看到源码的

 

可以在name中加入一个debugger来看一下变化

 

3.   同理，我们也可以在config文件中设置devtool来让我们像刚才一样，只需要输入一个webpack命令就能执行source-map的功能

 

 

 

 

 

Webpack结合bable的使用

Bable主要是用来处理ES2015也就是ES6的，由于ES6的一些代码有的浏览器是不能直接解析的，所以就必须用bable将其转换为浏览可以解析的代码。这就是bable。

1.   安装

cnpm installbabel-loader babel-core babel-preset-es2015 --save-dev

这里面分别安装了babel-loader这个不用解释吧，还有就babel-core，这个就是babel。

然后是babel-preset-es2015，这是babel的预设，就是他解析ES6的。

 

2.   添加预设  在根目录下创建一个名字为.babelrc的自定义文件，在里面添加预设

写成这样就行了

 

3.   配置文件中添加babel的配置

4,写点es6的代码，比如讲name.js中的和entry.js中的代码改成es6的

es6也是一种js代码的格式，但是浏览器不一定识别这种代码，所以要加几个babel插件， 和css的loader一样，在入口文件中，引用相关文件时，通过loader名引入的这个loader有什么用‘’

我们可以在默认文件中，通过配置模块，把所有引入的js文件的loader都设置为babel，这样就不需要在入口文件中，引入js文件时，在文件名前面加上对应的loader了，因为默认的config文件中已经设置了默认添加.

 

es6中，通过let来声明变量，通过export default来暴露接口，通过import来引入接口。

通过import引入接口一般有两种方式，分别对应引入js文件和引入css文件。

使用import ‘./文件路径’，获取到当前路径下的文件，该文件一般是非js类型文件，

我们能不能直接引入js文件，或是说我们引入js文件，能不能不仅仅是非常单一的  通过使用变量   接收  其他js文件暴露出的接口信息。存不存在其他用法？ 多个接口的暴露和接收是通过对象形式吗，有了这个接口是直接把整个js文件移入到当前文件中，还是仅仅把和该接口相关的一些文件引入到当前文件中？

我们引入js文件，一般是通过找到js文件暴露出的接口来引的，所以import name from ‘./name’; 的真正含义是引入  接口名是name的来自name的js文件。

只要我们通过一个接口找到了对应的js文件，就会把整个js文件内容都引入到当前文件中。

4.   然后运行webpack命令，看index网页

效果还能实现

 

 

 

 

 

Webpack-dev-server模块热替换

（热替换必须要开服务，监听，其效果是当改变代码时实现网页内容的自动更新）

1.   先全局安装  这里就不截图了

在c：\\users\Administrator>  (也就是直接运行cmd得到的)，输入cnpm install webpack-dev-server -g

2.   再本地安装：

找到你定义的webpack文件夹的路径，输入cnpm install webpack-dev-server--save-dev

3.   启动webpack-dev-server并添加热替换这个参数

因为都是在c:\user\administrator下安装的东西，所以没有course-webpack文件夹，所以忽略掉所有的course-webpack，直接运行   webpack-dev-server --inline --hot

 

4.   这个时候热交换就有了，同时开了一个8080的端口，通过改变css里的背景颜色，不用刷新页面就能直接变色，不信你试试。

 

 

Webpack与react+模块热交换

1.   安装一系列的组件

由于上面已经有安装过的，所以只需要安装cnpm install babel-preset-react react-hot-loader --save-dev

完整的：cnpm install babel-core babel-prest-es2015babel-preset-react webpack webpack-dev-severbabel-loader react-hot-loader --save-dev(红色表示上述已安装)

在安装一个：

cnpm installreact react-dom --save-dev

总共需要这么多，但是有的我们之前就装过，所以自己可以看哪个没有去装它，或者直接都再装一遍

 

2.   修改预设文件；

在这个预设文件的数组里添加react的预设

3.   在配置文件中加入react-hot这个loader

4.   把name.js改成react的

 

5.   再把entry.js改为react的

 

6.   在package.json文件夹中添加一对类似缩写或者是改变写法的一个参数

这样我们就不用在命令行中专门的去输入webpack-dev-server去启动端口了，

直接输入npm run watch即可。

如果出现这种报错：

就在webpack.config.js中把配置模块里配置js的loader中，把react-hot去掉即可。

 

7.   输入命令完成之后我们去看index