Hello, Webpack!

大家好，又见面了，我是全栈君。

前言

“模块化”可以说是现在前端最流行的三个字，而webpack就是一款非常非常流行的模块打包工具，它可以分析模块之间的依赖关系，并将这些模块根据指定规则打包成浏览器能识别的静态资源。

作为一个前端，学习并使用webpack已经是刻不容缓的事情，现在，就让我们开始webpack之旅吧。

安装webpack

首先新建一个空的文件夹，使用npm init命令初始化。

初始化的目的是为了生成package.json文件，这是一个npm说明文件，里面包含了当前项目的依赖模块，自定义的脚本任务等信息。

//新建webpack-demo的文件夹
mkdir webpack-demo
//进入该文件夹
cd webpack-demo
// 初始化
npm init
复制代码

输入npm init命令后，终端会要求你填写一些信息，如果你不准备在npm中发布你的模块，直接一路回车完成初始化就行。

初始化完成后，你可以看到已经生成了一个package.json文件，你也可以在这个文件里手动修改初始化的时候终端让你输入的信息。

接下来就要安装webpack，你可以全局安装webpack，也可以在项目目录下安装webpack，官方不支持全局安装，因为那样会使不同webpack版本的项目搭建失败。

// 全局安装
npm install -g webpack
// 安装到指定项目目录
npm install --save-dev webpack
复制代码

安装完成后我们发现项目目录中多了一个node_modules文件夹，我们可以查看下webpack的版本。

// 查看全局安装的webpack版本
webpack -v
// 查看非全局安装的webpack版本
cd node_modules/.bin
webpack -v
复制代码

接下来我们开始用webpack来打包第一个文件。

打包第一个文件

用编辑器打开项目，新建一个hello.js文件。

使用webpack打包hello.js文件，同样，不是全局安装webpack的小伙伴们这时得注意路径问题了。

// 全局安装webpack的情况
webpack hello.js bundle.js
// 非全局安装webpack的情况
cd node_modules/.bin
webpack [完整路径]/hello.js [完整路径]/bundle.js
复制代码

如图所示，打包完成后，webpack会告诉我们一些信息，比如打包时间、打包后文件的大小等。

这时我们发现，如果不是全局安装webpack，执行webpack打包命令将变得非常麻烦，其实我们可以配合npm的脚本来更快捷的执行打包任务。

修改package.json文件，在scripts属性中新增执行webpack打包的脚本，比如build，执行npm run build hello.js bundle.js，发现打包成功。

打包好之后我们可以通过live-server启动一个本地服务。

// 全局安装live-server
$ npm install -g live-server
复制代码

安装好之后执行live-server，会发现它已经帮我们打开了一个浏览器页面，并且当你修改本地任何文件时，浏览器都会自动更新。

现在我们已经成功打包了一个js文件，接下来让我们试着打包一个css文件。

新建一个index.html文件和style.css文件，在样式文件中添加一些样式，并在hello.js文件里用require的方式将其引入（require是CommonJS的语法，webpack支持CommonJS/AMD/CMD）。

这时如果我们直接打包会发现报错了，错误提示我们需要一个合适的loader来处理这种css文件类型。因此我们要先安装两个loader，css-loader和style-loader，前者是使webpack支持css文件，后者则会将样式通过style标签插入到html中。

npm install css-loader style-loader --save-dev
复制代码

安装完成后，我们还需要在文件引用的地方指定相应的loader。

require('style-loader!css-loader!./style.css')
复制代码

再次执行打包命令发现打包成功，在index.html里引入打包好的bundle.js，打开index.html页面发现样式已经成功显示。

// 文件更新的时候自动打包
webpack {entry file} {bundled file} --watch
// 显示文件打包的过程
webpack {entry file} {bundled file} --progress
// 显示所有模块
webpack {entry file} {bundled file} --display-modules
// 显示打包模块的原因
webpack {entry file} {bundled file} --display-reasons
复制代码

webpack配置文件

webpack有非常多的功能，因此我们需要有一份好的配置文件来放置所有的打包配置信息。

如图所示，构建一份新的目录，src文件夹用来放打包前的资源，dist文件夹用来放打包后的资源，webpack.config.js用来配置打包信息，如果配置文件不叫webpack.config.js，则打包的时候需要用–config来重新指定，比如

webpack --config webpack.config.a.js
复制代码

入口（Entry）和出口（Output）

入口（enrty），简单来说，就是告诉webpack从哪里开始。我们可以通过在webpack配置中配置entry属性，来指定一个入口起点（或多个入口起点）。webpack会根据这个入口，来获取模块之间的依赖关系并根据依赖关系来知道需要绑定些什么。

出口（output），用来告诉webpack打包后文件做何处理及存放的位置。如上图所示，output.filename 指定了打包后的文件的名字，output.path则指定了文件存放的位置。

关于path获取到的绝对路径，我们可以新建一个js文件输入该路径，并用node运行这个js文件。

入口（Entry）

单个入口写法

entry属性的单个入口语法，是下面这种的简写方式：

对象语法

出口（Output）

单个入口起点

多个入口起点

如果在打包生成的文件名后面加上不确定的chunkhash，这时候我们需要借助webpack的插件html-webpack-plugin来自动生成项目中的html页面。

// 通过npm安装
$ npm install html-webpack-plugin --save-dev 
复制代码

Loader

loader用于对模块的源代码进行转换。它可以将不同语言的文件转换为JavaScript，或将图片转换为dataURL等。

举个栗子babel

安装babel：

$ npm install --save-dev babel-loader babel-core babel-preset-latest
复制代码

指示webpack对每个.js结尾的文件使用babel-loader进行转换：

module: {
    loaders: [
        {
            test: /\.js$/,
            loader: 'babel-loader',
            include: path.resolve(__dirname, 'src'),
            exclude: path.resolve(__dirname, 'node_modules'),
            query: {
                presets: ['latest']
            }
        }
    ]
}
复制代码

其他文件类型

loaders: [
    {
        test: /\.js$/,
        loader: 'babel-loader',
        include: path.resolve(__dirname, 'src'),
        exclude: path.resolve(__dirname, 'node_modules'),
        query: {
            presets: ['latest']
        }
    },
    {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
    },
    {
        test: /\.less$/,
        loader: 'style-loader!css-loader!less-loader'
    },
    {
        test: /\.(png|jpg|gif|svg)$/i,
        loaders: [
            'url-loader?limit=10000&name=assets/[name]-[hash:5].[ext]',
            'image-webpack-loader'
        ]
    }
]
复制代码