Webpack快速入门

时间 2019-11-12

标签 webpack 快速入门繁體版

原文原文链接

1、概述

webpack is a tool to build JavaScript modules in your application. webpack simplifies your workflow by quickly constructing a dependency graph of your application and bundling them in the right order. webpack can be configured to customise optimisations to your code, to split vendor/css/js code for production, run a development server that hot-reloads your code without page refresh and many such cool features.css

webpack是一款前端资源模块化管理和打包的工具。它能够将模块按照依赖和规则进行打包，还能够将按需加载的模块进行代码分离，实现异步加载。经过加载器，任何形式的资源均可以被看做成模块。html

Github地址前端

从一个主文件开始，依次寻找项目的全部依赖文件，经过加载器进行处理，最后打包成浏览器可以识别的JavaScript文件。node

2、特色

webpack和其余模块化工具相比，具备以下特色：webpack

代码分离git

webpack有两种组织模块依赖的方式：同步和异步。异步依赖会将代码分离成不一样的区块，每个区块都做为一个文件被打包。github
加载器web

webpack自身只能处理原生的JavaScript模块，经过加载器，能够将不一样类型的资源转换成JavaScript模块。换句话说，任何资源均可以被webpack当成模块来处理。正则表达式
智能解析npm

webpack经过智能解析器，几乎能够处理任何的第三方库。而且在加载依赖的时候，容许使用动态表达式进行加载。
插件

webpack还提供了插件系统，大多数功能都是基于这个插件系统运行的。能够经过开发和使用webpack插件，知足不一样的需求。
运行效率

webpack经过异步I/O和多级缓存，大大提升了运行效率，可以快速地实现增量编译。

3、概念

为了可以更好地理解和使用webpack，首先须要了解webpack的四大核心概念：

入口entry

webpack为应用程序的全部依赖建立了一个图表，这个图表的起始点被称为入口点。入口点会告诉webpack从哪里开始，而且根据依赖图表，清楚哪些资源会被打包。entry属性用来定义入口点。
输出output

一旦将资源打包在一块儿以后，须要告诉webpack将要把应用程序打包到何处。output属性用来描述打包文件的位置。
加载器loaders

当非JavaScript资源被添加到依赖图表时，经过加载器将这些文件转换成模块。test属性用来定义要转换的文件类型。use属性指定加载器的类型。
插件plugins

相对于加载器只能基于每一个文件进行转换，插件一般用来针对复杂应用执行操做和自定义功能。要想使用插件，首先须要使用require()方法引入插件模块，而后在plugins数组中，建立一个该插件的实例。

4、安装和配置

一、安装Node.js

因为webpack须要使用npm进行安装，因此应该首先安装Node.js。

二、安装webpack

一般不建议使用$ npm install webpack -g命令进行全局安装。而是将webpack安装到项目的依赖中，这样，就可使用项目本地版本的webpack。

进入到项目目录，建立一个package.json文件：

npm init

安装webpack依赖：

npm install webpack --save-dev

也能够指定版本进行安装：

npm install webpack@<version> --save-dev

若是须要使用webpack开发工具，须要单独安装：

$ npm install webpack-dev-server --save-dev

三、运行

若是采用非全局安装，执行以下命令进行打包：

node_modules/.bin/webpack app/index.js public/bundle.js

其中，index.js是入口文件，bundle.js是目标文件。

四、配置

除了使用命令行运行webpack的方式，更好的方法是使用配置文件webpack.config.js。它是一个node.js模块，返回一个json格式的配置信息对象。也能够经过--config选项指定配置文件。

module.exports = {
  entry: __dirname + "/app/index.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  }
}

其中，entry属性指向入口文件，output属性指定打包后文件存放的位置，__dirname指向当前执行脚本所在的目录。

此时，执行node_modules/.bin/webpack命令，会自动参考配置文件中的配置选项打包项目。

还有一种更快捷的运行方式。在package.json中设置npm的脚本：

"scripts": {
    "start": "webpack" // 将npm的start命令指向webpack命令
},

这样，直接执行npm start命令，就会自动运行webpack进行打包。

5、用法

webpack不少强大的功能，都是经过一系列可供配置选项完成的。这里主要介绍一些经常使用的选项。

一、开发工具devtool

开发工具主要用来方便调试，提升开发效率。经过打包以后的文件，不太容易找到出现错误的地方对应的源码位置。这时，可使用Source Map来解决这个问题。

devtool: "source-map"

devtool属性有四种不一样的选项值：

source-map，在一个单独的文件中产生一个完整且功能彻底的文件。这个文件具备良好的source map，但会下降打包文件的构建速度。
cheap-module-source-map，在一个单独的文件中生成一个不带列映射的map，可以相应地提升构建速度，但不能对应到具体的列，会对调试形成不便。
eval-source-map，使用eval打包源文件模块，在同一个文件中生成干净且完整的source map，不会影响构建速度，但输出的js文件存在性能和安全隐患。建议在开发阶段使用，必定不要在生产阶段使用此选项。
cheap-module-eval-source-map，可以以最快的速度生成source map，生成的source map和打包后的js文件同行显示，没有列映射。一样建议只在开发阶段使用。

Tips：在开发阶段使用eval-source-map选项。

二、本地服务器devserver

开发过程当中，但愿浏览器可以监测到代码的修改，并自动刷新，显示修改以后的结果。这时，能够配置devserver构建本地服务器来完成这些功能。

devServer: {
    contentBase: "./public",
    inline: true,
    colors: true,
    historyApiFallback: true
}

由于本地服务器是一个单独组件，因此在配置以前须要单独安装：

npm install webpack-dev-server --save-dev

devserver属性有以下配置选项：

contentBase，默认状况下，为根文件夹提供本地服务器。若是想为其余目录提供本地服务器，能够在此选项设置目录。
port，设置监听端口，默认为8080。
inline，设置为true时，当源文件发生改变会自动刷新页面。
colors，设置为true时，终端输出的结果为彩色的。
historyApiFallback，设置为true时，全部的跳转都指向index.html，主要用于单页面应用。

三、加载器loaders

Loaders是webpack最强大的功能之一。经过使用不一样的loader，webpack调用外部的脚本或工具，能够对各类格式的文件进行处理。

Loaders须要单独安装：

npm install json-loader --save-dev

而且须要在modules属性下进行配置：

module: {
    loaders: [
      {
        test: /\.json$/,
        loader: "json"
      }
    ]
}

loaders属性有以下配置选项：

test，匹配loaders所处理文件的扩展名的正则表达式（必须）。
loader，loader的名称（必须）。
include，添加必须处理的文件夹或文件（可选）。
exclude，屏蔽不须要处理的文件夹或文件（可选）。
query，为loaders提供额外的设置选项（可选）。

webpack提供了不少有用的loader，如css-loader和style-loader，用来处理样式表。css-loader可以使用相似@import和url()的方法实现require()的功能，而style-loader则将全部计算后的样式加到页面中。

安装：

npm install style-loader css-loader --save-dev

配置：

module: {
    loaders: [
      {
        test: /\.css$/,
        loader: "style!css"
      }
    ]
}

其中，“!"表示同一文件可以使用不一样类型的loader。

Sass或Less之类的预处理器是对原生CSS的拓展，不一样类型的预处理器也对应不一样的loader。webpack还提供一个CSS处理平台PostCSS，可使CSS可以实现更多功能。使用PostCSS能够为CSS代码自动添加适应不一样浏览器的CSS前缀。

安装：

npm install postcss-loader autoprefixer --save-dev

配置：

postcss: [
    require('autoprefixer')
]

Babel是一个编译JavaScript的平台，它支持下一代的JavaScript标准（如：ES6），以及基于JavaScript进行拓展的语言（如：JSX）。

安装：

npm install babel-core babel-loader babel-preset-es2015 --save-dev

配置：

module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel"，
        query: {
          presets: ['es2015']
        }
      }
    ]
}

四、插件plugins

webpack的另外一个强大功能。在整个构建过程当中，执行相关任务，拓展webpack功能。webpack有不少内置插件，同时也有不少第三方插件。

要想使用插件，首先须要安装：

npm install html-webpack-plugin --save-dev

而后在plugins属性中添加该插件的一个实例：

plugins: [
    new HtmlWebpackPlugin({
        template: __dirname + "/app/index.tmpl.html"
    })
]

Hot Module Replacement（HMR）也是webpack中很实用的插件，容许在修改组件代码后，自动刷新实时预览修改后的效果。

实现HMR只须要进行以下几项配置。

在plugins中添加HMR插件：

new webpack.HotModuleReplacementPlugin()

在devserver中添加hot属性：

hot: true

在js模块中执行webpack提供的API。

五、产品构建

虽然以上内容能够构建一个完整的开发环境，但在产品阶段，可能还须要对打包的文件进行额外的处理，如：优化、压缩、缓存、代码分离等。

OccurenceOrderPlugin，为组件分配ID，webpack能够分析和优先考虑使用最多的模块，并为其分配最小的ID。
UglifyJsPlugin，压缩js代码
ExtractTextPlugin，分离css和js文件

使用缓存最好的方法是保证文件名和文件内容相匹配。webpack能够把一个哈希值添加到打包的文件名中。

output: {
    path: __dirname + "/build",
    filename: "[name]-[hash].js"
}

参考文章：

入门Webpack