webpack2基础教程

目前webpack版本更新到2.3.0，官方文档依然是2.2的，其实区别不大，所以教程大致依然走文档路线风，也包含一点我个人实践和理解

什么是webpack

官方说它是一个现代的模块打包工具，基于JavaScript，有四大核心，分别是 Entry、Output、Loaders 和 Plugins。

Entry 你的项目的入口点，作为执行上下文的根
Output 执行完成后，生成文件的存放位置的属性
Loaders 实现对更多不同的资源进行模块管理和控制的依赖
Plugins 提供对资源模块管理和控制过程中的自定义功能

基于这四个核心，可以帮助我们实现强大的前端开发任务流

安装webpack

通过npm安装

npm install webpack --save-dev

通过yarn安装 (brew install yarn)

yarn add webpack --dev

两者都会自动保存到package.json

配置webpack

到所在的项目里新建一个webpack.config.js文件

touch webpack.config.js

所有配置都是基于这个文件

Entry Points

官方那显示的是下面的配置方式

const config = {
  entry: './path/to/my/entry/file.js'
};

module.exports = config;

一般情况下，我们是用下面这种的，下面的代码例子也采用这种方式

module.exports = {
  entry: './path/to/my/entry/file.js'
}

这里的webpack的配置文件用的是CommonJS规范(require/exports)，跟Node.js一样。但从2.0版本开始，webpack原生支持用ES6 module规范(import/export)去进行模块打包，这里是需要一点点的注意

Output

output属性最少带有两个参数，一个是filename，另外一个是path

filename 建议是使用main.js、bundle.js、index.js

配置如下

module.exports = {
  output: {
    filename: 'bundle.js',
    path: '/home/proj/public/assets'
  }
}

如果我们要多entry多output，则如下

module.exports = {
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/build'
  }
}

执行后，将会输出./build/app.js, ./build/search.js

Loaders

这里以babel-loader为例

安装Babel

yarn add babel-loader babel-core babel-preset-es2015 --dev

然后配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          'babel-loader',
        ],
        exclude: /node_modules/
      }
    ]
  }
}

上面是官方的推荐的2.x版的module.rules写法，更语义~

在1.x版本之前，我们更多地是用module.loaders写法，如下

module.exports = {
  module: {
    loaders: [
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }
    ]
  }
}

这是需要我们注意

Plugins

webpack是自带一些常用的插件，我们也安装其他webpack插件来配置

安装html-webpack-plugin

yarn add html-webpack-plugin --dev

配置webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
}

如果是自带的插件，则需要require自身然后引用，如UglifyJsPlugin，如果是第三方插件，安装好之后直接require使用就可以了

执行webpack

在终端内，进入项目目录，输入

webpack

其他常用命令参数

webpack – 执行一次开发构建
webpack -p – 执行一次生产构建
webpack --watch – 项目代码发生变化就执行一次开发构建
webpack -d - 采用source-map的形式显示

webpack Module

与Node.js单一的模块依赖规范不一样，webpack Module有多种模块规范去表述模块的依赖关系

例如

ES2015 的import、export
CommonJS 的require、exports
AMD的define、require
css/sass/less 文件的@import
样式表里的url(...)或HTML里的<img src=...>

还有，通过Loader让webpack帮助我们支持更多不同类型的文件

内容不多，至此~

参考

webpack.js.org/concepts/
github.com/ruanyf/webpack-demos

本文由 Chakhsu Lau 创作，采用知识共享署名4.0 国际许可协议进行许可。
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名。