Webpack 是德国开发者 Tobias Koppers 开发的模块加载器,它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载。通过 loader 的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

一、安装配置

安装

先装好nodenpm,因为webpack是一个基于node的项目。然后

npm install -g webpack

建立项目

  • 建一个文件夹,然后新建一个package.json的文件在项目根目录下
mkdir webpack
cd webpack
npm init
# 一直点回车 如果懒得填一些信息
  • 新建webpack.config.js文件 —— 这个配置文件主要分为三大块

    • entry 入口文件 让webpack用哪个文件作为项目的入口
    • output 出口 让webpack把处理完成的文件放在哪里
    • module 模块 要用什么不同的模块来处理各种类型的文件

示例结构

  • /build
    • index.js
    • about.js
  • /src
    • a.js
    • a.css
    • b.js
    • b.css
    • c.js
    • c.css
  • package.json
  • index.html
  • webpack.config.js

二、基本用法

//webpack.config.js
module.exports = {
entry: { //打包成2个文件index.js,about.js
index: ['./src/a.js', './src/a.css', './src/b.js', './src/b.css'],
//css和js打包到一起, 用<style>添加到页面
about: ['./src/a.js', './src/a.css', './src/c.js', './src/c.css'],
},
output: {
path: __dirname +'/build',
filename: '[name].js' // 会生成index.js, about.js
},
module: {
loaders: [
{ test: /\.css$/, loader: 'style-loader!css-loader' }, // 针对.css文件用2个加载器预处理
]
},
};

三、运行

$ webpack --display-error-details 
#运行webpack,方便出错时能查阅更详尽的信息

$ webpack --config XXX.js
#使用另一份配置文件(比如webpack.config2.js)来打包

$ webpack --watch
#监听变动并自动打包

$ webpack -p
#生产模式,会压缩混淆脚本代码

$ webpack -d
#开发者模式,生成map映射文件,告知哪些模块被最终打包到哪里了

其中的 -p 是很重要的参数,曾经一个未压缩的 700kb 的文件,压缩后直接降到180kb(主要是样式这块一句就独占一行脚本,导致未压缩脚本变得很大)。

四、常用loader

1.CSS样式 - css-loader, style-loader

需要两种loader,css-loader 和 style-loader,css-loader会遍历css文件,找到所有的url(…)并且处理。style-loader会把所有的样式插入到你页面的一个style tag中。

  • 安装loader
npm install css-loader style-loader --save-dev
  • webpack.config.js配置
//.css 文件使用 style-loader 和 css-loader 来处理
module: {
loaders: [
{
test: /\.css$/,
loader: 'style-loader!css-loader'
}
]
},

2.处理样式 - less-loader, sass-loader

将less,sass文件转换为css文件

3.图片处理 - url-loader, file-loader

两个都必须用上。否则超过大小限制的图片无法生成到目标文件夹中

4.支持ES6 - babel-loader

处理js,将es6或更高级的代码转成es5的代码

5.暴露模块到全局 - expose-loader

将js模块暴露到全局

6.压缩HTML - html-minify-loader

五、常用plugin

ProvidePlugin

提供类似jQuery的$全局变量

CommonsChunkPlugin

插件用法比较多,常用的是把一些不经常更改的公共组件合并压缩成一个common文件

ExtractTextPlugin

将CSS生产独立文件,不做内联

NoErrorsPlugin

报错停止打包但是不退出webpack进程

UglifyJsPlugin

压缩JS

HotModuleReplacementPlugin

代码热替换

HtmlWebpackPlugin

创建html文件,配合ExtractTextPlugin可以加入打包后的js和css

转载请标注原文地址