webpack基础知识与工具使用

webpack是一个前端资源加载/打包工具，将根据模块的依赖关系进行静态分析，并依据规则生成对应的静态资源。

在安装webpack前，本地环境需要已安装了node.js，然后npm install webpack -g进行安装。

在使用wepack show.js bundle.js打包单个js文件发生错误。

多个./hello.js bundle.js中的错误

找不到模块：错误：无法解析'H：\ webpack-test \中的'bundle.js'

 @ multi ./show.js bundle.js main[1]

解决办法：

旧版本是这样进行打包：

webpack show.js bundle.js 
但是新版本后我们应该用这样的命令

webpack show,js -o bundle.js

我目前所用的版本：

接下来尝试进行打包show.js

这时报错消失，在项目目录下，自动添加了一个新的文件bundle.js.

上面只是打包一个js文件，很难看出其中产生了那些依赖关系，下面是webpack打包多个文件的演示。

str.js文件，提供show.js文件需要的数据，可以是字符串，json格式的数据，还可以是函数，使用module.exports将数据暴露出去。

show.js使用require接受数据并显示。

在控制台使用webpack show,js -o bundle.js命令重新生成bundle.js文件。

样式的打包：

通过安装loader加载器，可以将静态的样式文件一同打包到bundle.js文件中，通过下列命令安装加载器。

 npm install css-loader style-loader

css-loader使你能够使用类似@import和url（...）的方法实现require的功能，style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的js文件中。

因此，我们这样配置后，遇到后缀为.css的文件，webpack先用css-loader加载器去解析这个文件，遇到“@import”等语句就将相应样式文件引入（所以如果没有css-loader，就没法解析这类语句），最后计算完的css，将会使用style-loader生成一个内容为最终解析完的css代码的style标签，放到head标签里。

需要注意的是，loader是有顺序的，webpack肯定是先将所有css模块依赖解析完得到计算结果再创建style标签。因此应该把style-loader放在css-loader的前面（webpack loader的执行顺序是从右到左）。

安装完成后编写style.css文件，在show.js文件引入这个文件

require("!style-loader!css-loader!./style.css");

样式显示成功。

配置文件：webpack.config.js

在手动编译时，可以将一些经常性的操作，添加到配置文件，减少编译过程中，手写代码的数量，构造自动工具。

这不用使用webpack show.js -o bundle.js来编译生成bundle.js文件，我们可以直接使用webpack来编译。

安装第三方库文件

在项目中安装jQuery第三方库，并在使用时，通过require函数引入安装的库文件，就可以使用这个库文件。

npm install jquery --save-dev

导入

var $=require("jquery");

$("div").html("ok");

修改package.json

这时可以通过npm run build来编译生成bundle.js文件，不用在使用webpack

服务器端环境安装

通过安装webpack-dev-server模块，可以将项目打包到服务端，并可以通过指定端口，同时，还可以配置启动命令。

npm install webpack-dev-server --save-dev

安装完成

添加start

在控制台输入npm start启动项目

这时可通过8080端口访问页面。

在package.json中找到这段代码加上--watch可自动检测代码的变化，不用重新编译。

webpack入门视频：http://edu.51cto.com//center/course/lesson/index?id=214838