Webpack快速入门

2017-04-09  本文已影响51人  凛_冬_将_至

一、概述

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.

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

Github地址

从一个主文件开始，依次寻找项目的所有依赖文件，通过加载器进行处理，最后打包成浏览器能够识别的JavaScript文件。

二、特点

webpack和其他模块化工具相比，具有如下特点：

三、概念

为了能够更好地理解和使用webpack，首先需要了解webpack的四大核心概念：

四、安装和配置

1、安装Node.js

由于webpack需要使用npm进行安装，所以应该首先安装Node.js。

2、安装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

3、运行

如果采用非全局安装，执行如下命令进行打包：

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

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

4、配置

除了使用命令行运行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进行打包。

五、用法

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

1、开发工具devtool

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

devtool: "source-map"

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

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

2、本地服务器devserver

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

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

因为本地服务器是一个单独组件，所以在配置之前需要单独安装：

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

devserver属性有如下配置选项：

3、加载器loaders

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

Loaders需要单独安装：

npm install json-loader --save-dev

并且需要在modules属性下进行配置：

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

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']
        }
      }
    ]
}

4、插件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。

5、产品构建

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

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

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

参考文章：

入门Webpack

上一篇下一篇

猜你喜欢

热点阅读