WebKong的网络日志

分享工作中的所用、所想、所感。

0%

webpack配置(jQuery+jq插件)

安装webpack过程略过,同学可自行查看上一篇文章.

1.在项目目录下新建文件webpack.config.js

1
2
3
4
5
6
7
module.exports = {
entry: './src/app.js',
output: {
path: './bin',
filename: 'app.bundle.js'
}
};

这个一个符合CommonJS风格的module

2.简单的配置之后就可以运行打包。

1
webpack

webpack就会读取配置文件webpack.config.js,build并生成app.bundle.js

3.还可以依赖插件,通过loader加载不同格式的文件

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
const webpack = require('webpack');

module.exports = {
entry: './src/app.js',
output: {
path: './bin',
filename: 'app.bundle.js',
},
module: {
loaders: [{ //加载器
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
}]
},
resolve: {
extension: ['', '.js', '.css'],
alias: {//设置别名
jquery: ("jquery"),
qrcode: ("jquery.qrcode")
}
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
})
]
}

4.使用jQuery和jQuery插件
如上面的代码plugins:

1
2
3
4
5
6
7
lugins: [ //全局变量不用require
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
})
]

对于不支持CommonJS规范的模块,需要安装 imports-loader

1
2
3
//app.js
require('imports?$=jquery!qrcode'); //引入 jQuery的二维码插件
这样就可以成功引入jQuery和jQuery的插件。

config文件说明

entry
配置要打包的文件的入口;可以配置多个入口文件,下面会有介绍。

resolve
配置文件后缀名(extensions),除了js,还有jsx、coffee等等。
alias配置项,可以为常用模块配置改属性,可以节省编译的搜索时间。例如:

1
2
3
4
5
6
resolve:{
extensions:['.js','.jsx'],
alias:{
'react':path.join(nodeModulesPath,'react/react.js')
}
}

output
配置输出文件的路径,文件名等。

module(loaders)
配置要使用的loader。对文件进行一些相应的处理。比如babel-loader可以把es6的文件转换成es5。
大部分的对文件的处理的功能都是通过loader实现的。loader就相当于gulp里的task。loader可以用来处理在入口文件中require的和其他方式引用进来的文件。loader一般是一个独立的node模块,要单独安装。

loader配置项:

1
2
3
4
test: /\.(js|jsx)$/,           //注意是正则表达式,不要加引号,匹配要处理的文件
loader: 'eslint-loader', //要使用的loader,"-loader"可以省略
include: [path.resolve(__dirname, "src/app")], //把要处理的目录包括进来
exclude: [nodeModulesPath] //排除不处理的目录

目前已有的loader列表:https://webpack.github.io/docs/list-of-loaders.html

一个module的例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
module: {
preLoaders: [
{
test: /\.(js|jsx)$/,
loader: 'eslint-loader',
include: [path.resolve(__dirname, "src/app")],
exclude: [nodeModulesPath]
},
],
loaders: [
{
test: /\.(js|jsx)$/, //正则表达式匹配 .js 和 .jsx 文件
loader: 'babel-loader?optional=runtime&stage=0',//对匹配的文件进行处理的loader
exclude: [nodeModulesPath]//排除node module中的文件
}
]
}

plugins
顾名思义,就是配置要使用的插件。plugin是比loader功能更强大的插件,能使用更多的wepack api。来看一个使用plugin的例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
plugins: [
//压缩打包的文件
new webpack.optimize.UglifyJsPlugin({
compress: {
//supresses warnings, usually from module minification
warnings: false
}
}),
//允许错误不打断程序
new webpack.NoErrorsPlugin(),
//把指定文件夹xia的文件复制到指定的目录
new TransferWebpackPlugin([
{from: 'www'}
], path.resolve(__dirname,"src"))
]

目前已有的plugins列表:http://webpack.github.io/docs/list-of-plugins.html

webpack官方文档

可以暴露成全局变量的2个配置 ,引用国际友人的解释。来源

externals
ProvidePlugin

It’s both possible: You can include libraries with a <script> (i. e. to use a library from a CDN) or include them into the generated bundle.

If you load it via <script> tag, you can use the externals option to allow to write require(…) in your modules.

Example with library from CDN:

1
2
3
4
5
6
7
<script src="https://code.jquery.com/jquery-git2.min.js"></script>

// the artifial module "jquery" exports the global var "jQuery"
externals: { jquery: "jQuery" }

// inside any module
var $ = require("jquery");

Example with library included in bundle:

1
2
3
4
5
6
7
8
copy `jquery-git2.min.js` to your local filesystem

// make "jquery" resolve to your local copy of the library
// i. e. through the resolve.alias option
resolve: { alias: { jquery: "/path/to/jquery-git2.min.js" } }

// inside any module
var $ = require("jquery");

The ProvidePlugin can map modules to (free) variables. So you could define: “Every time I use the (free) variable xyz inside a module you (webpack) should set xyz to require("abc").”

Example without ProvidePlugin:

1
2
3
// You need to require underscore before you can use it
var _ = require("underscore");
_.size(...);

Example with ProvidePlugin:

1
2
3
4
5
6
7
8
plugins: [
new webpack.ProvidePlugin({
"_": "underscore"
})
]

// If you use "_", underscore is automatically required
_.size(...)

Summary:

Library from CDN: Use <script> tag and externals option
Library from filesystem: Include the library in the bundle. (Maybe modify resolve options to find the library)
externals: Make global vars available as module
ProvidePlugin: Make modules available as free variables inside modules