Webpack初学
Webpack初学
a.简介-introduction
1.一个打包工具
2.一个模块加载工具
3.各种资源(例如JS（含JSX）、coffee、样式（含less/sass）、图片等)都可以当成模块来处理
WebPack的优势
1.webpack 是以 commonJS 的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。
2.能被模块化的不仅仅是 JS 了。
3.开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。
4.扩展性强，插件机制完善，特别是支持 React 热插拔（见 react-hot-loader ）的功能让人眼前一亮
5.代码分割，提供按需加载的能力
6.发布工具
b.安装-install
首先需要安装Node.js，node自带了包管理工具npm。
$ npm install webpack -g
常规项目还是把依赖写入 package.json 包去更人性化：
1
2
3
$ npm init
$ npm install webpack --save-dev
$ npm install webpack-dev-server --save-dev
配置-configure
每个项目下都必须配置有一个 webpack.config.js，它的作用如同常规的 gulpfile.js/Gruntfile.js ，就是一个配置项，告诉 webpack 它需要做什么
看看下方的示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
var webpack = require('webpack');
module.exports = {
//插件项
plugins: [
//提公用js到common.js文件中
new webpack.optimize.CommonsChunkPlugin('common.js'),
//将样式统一发布到style.css中
new ExtractTextPlugin("style.css", {
allChunks: true,
disable: false
}),
//使用ProvidePlugin加载使用频率高的模块
new webpack.ProvidePlugin({
$: "webpack-zepto"
})
],
//页面入口文件配置
entry: {
index : './src/main.js'
},
//入口文件输出配置
output: {
path: __dirname +'/dist/',
filename: '[name].js'
},
module: {
//加载器配置
loaders: [
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
]
},
//其它解决方案配置
resolve: {
extensions: ['', '.js', '.json', '.scss'],
alias: {
filter: path.join(__dirname, 'src/filters')
}
}
};
entry
entry是页面入口文件配置，可以是一个文件或者多个入口文件，可以是对象格式或者数组格式。
1
2
3
4
entry: {
index : './src/main.js'
}
entry:['./src/main.js','./src/index.js']
output
output 是对应输出项配置,主要包括path,filename和publishPath属性。path代表输出的路径，filename代表输出的文件名称，publishPath代表静态资源发布后的前缀地址
module.loaders
module.loaders 是最关键的一块配置。它告知 webpack 每一种文件都需要使用什么加载器来处理。点击这里可以查看loader list
1
2
3
4
5
6
7
8
9
10
11
module: {
//加载器配置
loaders: [
//.css 文件使用 style-loader 和 css-loader 来处理
{ test: /\.css$/, loader: 'style-loader!css-loader' },
//.scss 文件使用 style-loader、css-loader 和 sass-loader 来编译处理
{ test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
//图片文件使用 url-loader 来处理，小于8kb的直接转为base64
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
]
}
loader主要有3种使用方式：
1、在页面里面引用资源使用
require("url-loader?mimetype=image/png!./file.png");
2、在webpack.config.js文件夹中使用
{ test: /.png$/, loader: "url?mimetype=image/png" };
3、在命令行中编译使用
webpack --module-bind "png=url-loader?mimetype=image/png";
如上，”-loader”其实是可以省略不写的，多个loader之间用“!”连接起来。
注意所有的加载器都需要通过 npm 来加载，并建议查阅它们对应的 readme 来看看如何使用。
拿最后一个 url-loader 来说，它会将样式中引用到的图片转为模块来处理，使用该加载器需要先进行安装：
npm install url-loader -save-dev
配置信息的参数“?limit=8192”表示将所有小于8kb的图片都转为base64形式（其实应该说超过8kb的才使用 url-loader 来映射到文件，否则转为data url形式）。也可以使用file-loader来加载资源文件。
plugins
plugins 是插件项，这里我们使用了一个 CommonsChunkPlugin 的插件，它用于提取多个入口文件的公共脚本部分，然后生成一个 common.js 来方便多页面之间进行复用
如上，包含两种：
1、第一种webpack自带的一些插件：webpack.ProvidePlugin、webpack.optimize.CommonsChunkPlugin，
2、另外一种则通过npm包安装的：ExtractTextPlugin
resolve
resolve: {
// require时省略的扩展名，如：require('module') 不需要module.js
extension: ['', '.js'],
//别名
alias: {
filter: path.join(__dirname, 'src/filters')
}
}
运行 webpack
webpack 的执行也很简单，直接执行
1
2
$ webpack --display-error-details
$ webpack --mode=production
demo1-webpack-js
直接将app.js打包成bundle.js
webpack app.js -o bundle.js --mode development
demo2-Entry file
For example, main.js is an entry file.
1
2
// main.js
document.write('<h1>Hello World</h1>');
index.html
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
Webpack follows webpack.config.js to build bundle.js.
// webpack.config.js
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
}
};
Launch the server, visit http://127.0.0.1:8080 .
1
$ webpack-dev-server
