webpack学习笔记(一)

Webpack学习笔记

安装Webpack

因为webpack是在Node.js下运行的,所以,首先要确认电脑支持node.js

然后使用npm安装webpack

npm install webpack -g

创建项目

创建工作目录,或者cd到工作目录下

mkdir myWorkSpace

单js文件打包

cd到工作目录的js目录下,创建我们的js文件,并在其中写入自己要执行的代码

然后我们在HTML引入bondle.js文件

再去命名行中使用webpack打包

webpack youJs.js bondle.js

就可以打包成功了,当然bondle.js名字是你自己指定的,没有硬性要求,根据自己的项目需求命名就可以了

多js文件打包

我们可以根据自己的项目需求写js文件,最后我们新建一个js文件,我们可以先称之为main.js文件,在main.js文件中,我们可以这么写

require('你要引用的js路径');
require('另一个你要引用的js路径');
......
require('你引用 的js路径');

最后,我们再到命令行中使用webpack打包

webpack main.js bondle.js

最后在HTML中引用bondle.js就可以愉快的玩耍了

LOADER

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。

所以如果我们需要在应用中添加 css 文件，就需要使用到 css-loader 和 style-loader，他们做两件不同的事情，css-loader 会遍历 CSS 文件，然后找到 url() 表达式然后处理他们，style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中。

使用命令来安装css-loader style-loader

npm install css-loaer style-loader -g

完成上述步骤之后,我们以后再写main.js文件时,就需要在最上面加上

require('@style!css!thePahtOfYouOwnStyleFile');

然后我们再使用webpack命令来打包

webpack main.js bondle.js

配置文件

webpack的编译选项其实有很多,我们不可能每次都在命令行中输入一遍,所以喽,为了进行统一管理,一般都在根目录下创建webpack.config.js文件,对文件内容进行编写,从而达到统一管理的目的

一般我们这么编写webpack.config.js

module.exports = {
entry:'./main.js',
output:{
path:'theDirNameYouWangToOutput',
filename:'bundle.js'
},
module:{
loaders:[
{test:/\.css$/,loader:'style!css'}
]

}
}

编写了webpack.config.js之后,我们就可以在项目的根目录下执行webpack

webpack

就新鲜打包出来了