Dev/Webpack
Source Edit History
Webpack-Getting Started
文章目录
我的网站

Webpack: Getting Started

运行

一般的运行模式是在 CLI 里面运行 webpack [args……]

但是如果我们有配置文件的话，可以直接在 CLI 里面运行 webpack

  • 配置文件默认名称: webpack.config.js
  • 也可以通过 CLI 指定配置文件的名字

下方所有的内容都和配置文件相关。

Concepts

几个核心概念

  • Entry
  • Output
  • Loaders
  • Plugins

最简单的配置

1
2
3
4
5
6
7
8
9
module.exports = {
    entry: [
        "./main.js"
    ],
    output: {
        path: './output',
        filename: 'app.js'
    }
};

Entry

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// Example 1
module.exports = {
  output: {
    filename: './dist-amd.js',
    libraryTarget: 'amd'
  },
  context: path.resolve(__dirname, "app") 
    // 这个是上下文的选项, 这个选项决定了我们从哪一个目录的路径开始算相对路径, 根据当前的设置我们就会使用 /app 作为根目录
    
  entry: './app.js',
  mode: 'production',
}


// Example 2
...
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  }
...

// Example 3
const config = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  }
};

Output

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
const path = require('path');


/* Example 1: 打包成单独一个文件 */
module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'fileName.bundle.js' //这个地方直接写明文件名。
  }
};


/* Example 2: 打包成多个文件\ */
...
output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name]-[hash]-[chunkhash].js' 
    //如果有多个路口，那么这边就被打包成了多个文件。
    // 同时 filename 也可以指定相对路径, 这里我们就打包到了 dist/js/
  }
...

// [hash] 代表这一次打包操作的 Hash
// [chunkhash] 代表这一个 Chunk 的 Hash (类似 MD5 加密, 如果打包后的 Hash 没有变化那么源文件也没有变化, 可以用于区分文件唯一性)


Loaders

装载器, 本身 Webpac 仅仅能够理解 JS, 有了 Loader 之后就可以加载其他各种文件
Loaders 的理念将模块化延伸到了其他所有文件上, 所有文件都会被当做模块

CSS 的模块化很好的解决了全局变量污染的问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const path = require('path');

const config = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

module.exports = config;

几个关键的参数:

  1. test: 需要处理的文件
  2. use: 对文件进行处理的 loader

因此上方代码, 如果遇到了 txt 扩展名的文件就会使用 raw-loader 进行处理

Hint: 当在 webpack config 中定义 rule 时, 应该放到 module.rules 下面而不是直接放到 rule 下面

Example

*.CSS和*.ts全部转为 JS

1
2
3
4
5
6
7
8
9
10
11

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' }
    ]
  }
};


Using Loaders

3 种方法:

Configuration: webpack.config.js 里面设置

直接指明对应的loader:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        { loader: 'style-loader' },
        {
          loader: 'css-loader',
          options: {
            modules: true
          }
        }
      ]
    }
  ]
}
Inline: 使用 import 关键字引用 loaders
1
2
import Styles from 'style-loader!css-loader?modules!./styles.css';

  • 感叹号分割, 问号后面带的是参数
  • 路径都是相对路径
CLI: 命令行处理时加上参数
1
2
webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'

懒得写了, 正常人不会这么用的

Plugins

处理一下比 loader 更为复杂的任务

添加 Plugin 需要 2 个步骤:

  1. 使用 require 引用这个插件
  2. 添加到module.plugins里面
  • 因为 config 文件会被引用多次, 因此 plugin 每次都要新建一个实例, 因此需要在所有 plugin 前面加个 new
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
//installed via npm

const webpack = require('webpack'); 
//to access built-in plugins

const config = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

(Mode)

设置时开发状态development还是产品状态production

1
2
3
module.exports = {
  mode: 'production'
};

Webpack VS Gulp/Grunt

Grunt 和 Gulp 的工作方式是: 在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，工具之后可以自动替你完成这些任务。

Webpack 的工作方式是: 把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack 将从这个文件开始找到你的项目的所有依赖文件，使用 loaders 处理它们，最后打包为一个（或多个）浏览器可识别的 JavaScript 文件。

参考文献