标签：
一、安装使用
1.全局安装webpack
npm install webpack -g
2.建立一个package.json
npm init
3.安装webpack依赖
npm install webpack --save-dev
4.使用webpack开发工具，安装webpack-dev-server此时的outpath中没有输出，需要webpack -p发布了才有
npm install webpack-dev-server --save-dev
注：使用--save-dev的目的是使将所安装的依赖加入到package.json中。
二、使用
1.在不使用webpack.config.js的前提下可以直接使用命令
$ webpack entry.js bundle.js
以上代码的含义为将entry.js文件通过webpack打包成bundle.js文件
2.webpack使用CommonJS的书写形式：以下是我简单的理解
CommonJS指一个文件一个模块，但会一次性加载（即同步加载），但在浏览器端不适用这种方式，加载速率什么的，于是引入了异步加载，其中有CMD（sea.js）与AMD（require.js）。
CMD:define(function (require, exports, module) {})延迟加载的方式，但用到资源了再加载，
AMD:define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {})提前加载的方式，用的时候资源已经加载完成
abc.js
document.write(require(‘./module.js‘)) // 添加模块
module.js
module.exports = ‘It works from module.js.‘
要上是引用模块的方式
三、webpack.config.js的常用功能及配置
1.entry:设置入口。存放主文件
2.output:设置输出
path:输出文件路径
filename:输出文件名称
publicPath:设置资源访问路径，即localhost:8080直接在该目录下访问，否则从根目录下访问
3.loader:Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换
test:匹配希望处理文件的路径
exclude:匹配不希望处理文件的路径
loader:此处xxx-loader可以简写为xxx，？后以query方式传递给loader参数
处理JS
{
test: /\.js$/,
exclude: /node_modules|vue\/src|vue-router\//,
loader: ‘babel‘
//babel可以让我们在编写代码时使用ES6的版本
}
处理css
{
test: /\.css$/,
loader: ExtractTextPlugin.extract(
"style-loader",
"css-loader?sourceMap"
)
//loader: "style!css" //用css-loader解析，再用style-loader解析
}, {
test: /\.less$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
//loader: "style!css!less"//先用less-loader解析，再用css-loader解析，再用style-loader解析
}
以上使用extract-text-webpack-plugin将css从js代码中抽出并合并，如不需要则使用注释的代码
处理图片与字体
{
test: /\.(png|jpg)$/,
loader: ‘url-loader?limit=8192‘ // <= 8kb的图片base64内联
},
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: ‘url?limit=10000&minetype=application/font-woff‘
},
{
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
loader: ‘url?limit=10&minetype=application/font-woff‘
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: ‘url?limit=10&minetype=application/octet-stream‘
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: ‘file‘
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: ‘url?limit=10&minetype=image/svg+xml‘
}
解析vue
{
test: /\.vue$/,
loader: ‘vue-loader‘
}
四、插件的使用
1.
plugins: [
new webpack.BannerPlugin(‘This file is created by pcd‘)
]
生成文件的顶部会出现这句话"This file is created by pcd".
2.
plugins: [
new webpack.ProvidePlugin({
‘Moment‘: ‘moment‘,
"$": "jquery",
"jQuery": "jquery",
"window.jQuery": "jquery"
})
]
当每一个JS文件都需要引用jquery库时，就可以将其放在公共库中。
$ webpack-dev-server --progress --colors
运行该命令可以对webpack进行监听
也可以在oackage.json中加入
"scripts": {
"dev": "BUILD_DEV=1 webpack-dev-server --progress --colors",
"build": "BUILD_PRERELEASE=1 webpack -p"
}
开发
npm run dev
发布
npm run build
五、合并公共模块
var webpack = require(‘webpack‘);
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
...
entry: {
a: ‘./index/a.js‘,
b: ‘./idnex/b.js‘,
c: ‘./index/c.js‘,
d: ‘./index/d.js‘
},
...
plugins: [
new CommonsChunkPlugin(‘part1.js‘, [‘a‘, ‘b‘]),
new CommonsChunkPlugin(‘common.js‘, [‘part1‘, ‘c‘])
]
...
标签：
原文地址：http://www.cnblogs.com/pcd12321/p/5648016.html
