webpack是一个前端资源加载/打包工具,将根据模块的依赖关系进行静态分析,并依据规则生成对应的静态资源。
在安装webpack前,本地环境需要已安装了node.js,然后npm install webpack -g进行安装。
在使用wepack show.js bundle.js打包单个js文件发生错误。
解决办法:
旧版本是这样进行打包:
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