以前没用过前端构建工具，最近想试试 Vue ，所以想用一用 webpack ，找了一堆教程，看了都感觉不是很能理解透彻... 大都是讲步骤，而 webpack 每个步骤的逻辑的不是讲的很清楚，最终看了看 webpack 官方文档和示例才到能用的地步....
笔记一下：
安装
全局安装
npm install webpack -g
项目安装
npm install webpack --save-dev
加载器
加载器使用方法有三种
- js 里使用
require - webpack.config.js 里配置
- CLI 命令行中绑定
使用 require 文件处理顺序从右到左，比如：
require("!style!css!less!bootstrap/less/bootstrap.less");
文件 bootstrap/less/bootstrap.less 依次经过以下加载器处理： -> less -> css -> style
通常使用配置 webpack.config.js 的方法。
在配置中指定某种后缀的文件用哪个加载器，再在 js 里就可以直接用 require(file.XXX) 了。
安装 babel 载入器
npm i --save-dev babel-core babel-loader
npm install babel-preset-es2015 --save-dev //支持ES2015
// npm install babel-preset-stage-0 --save-dev //支持ES7
webpack.config.js 配置：
{test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', query: {presets: 'es2015',}}
配置中 test 是文件名测试，用一个正则表达式测试文件名，匹配的文件名就会使用这个载入器。
exclude 是排除的规则，通常我们要把 "node_modules" 排除掉，
安装 CSS\SASS 载入器
npm install css-loader style-loader sass-loader node-sass --save-dev
webpack.config.js 配置：
{ test: /\.css$/, loader: 'style-loader!css-loader'},
{ test: /\.sass$/, loaders: ["style", "css", "sass"]},
{ test: /\.scss$/, loaders: ["style", "css", "sass"]}
npm install url-loader file-loader --save-dev
安装图片载入器
npm install url-loader file-loader --save-dev
图片载入器用来把 CSS 中的 url 地址中的文件转化成 BASE64 的形式
{test: /\.(png|jpg|jpeg)$/, loader: 'url?limit=8000&name=../bin/img/[name].[ext]'}
载入配置中 ?limit=8000 表示只把 8K 大小以下的图片转换成 BASE64。&name=../bin/img/[name].[ext] 表示把没有处理的文件复制到指定文件夹。
第三方库
npm install lodash --save-dev
npm install jquery --save-dev
使用第三方库时要把配置中的入口 entey 改为数组形式, 并区分自己的 js 和第三方库的 js，这是为了接下来不把第三方库和自己的 js 合并在一起：
entry: {
main:'./src/entry.js',
vendor:['jquery', 'lodash']
}
使用下面两个插件来把第三方库单独打包并注册全局标识符：
plugins: [
new webpack.ProvidePlugin({$: 'jquery', jQuery: "jquery", _:"lodash"}),// 注册全局标识符
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'),// 把第三方库单独打包
]
压缩
需要发布时，使用 webpack.optimize.UglifyJsPlugin 插件来压缩代码：
plugins: [
new webpack.optimize.UglifyJsPlugin({compress: {warnings: false}})
]
配置结果：
const webpack = require('webpack');
module.exports = {
entry: {
main:'./src/entry.js',
vendor:['jquery', 'lodash']
},
output: {
path: './bin',
filename: 'app.bundle.js'
},
module:{
loaders:[
{test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', query: {presets: 'es2015',}},
{test: /\.css$/, loader: 'style-loader!css-loader' },
{test: /\.sass$/, loaders: ["style", "css", "sass"]},
{test: /\.scss$/, loaders: ["style", "css", "sass"]},
{test: /\.(png|jpg|jpeg)$/, loader: 'url?limit=8000&name=../bin/img/[name].[ext]'}
]
},
plugins: [
new webpack.BannerPlugin("---------nullice--------Banner 注释"),
new webpack.ProvidePlugin({$: 'jquery', jQuery: "jquery", _:"lodash"}),
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'),
// new webpack.optimize.UglifyJsPlugin({compress: {warnings: false}})
]
};