webpack笔记

发表于

wepback是一个很好用的工具，不过一直在想到要用的时候才去查资料，所以今天特地写一篇笔记。

安装webpack

在我写这篇文章的时候，webpack已经出了v3.0.0，不过我还是准备继续沿用v2.6.0版本。

1
npm install webpack@2.6.1 -S-dev

简单的webpack配置

这一章先写在前面，想直接使用的同学可以看这个：

安装

1
2
3
4
5
6
npm install path -S-dev
npm install css-loader -S-dev
npm install style-loader -S-dev
npm install babel-loader -S-dev
# path 是路径
# css-loader 是css解析器

配置

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
var path = require("path"),
    webpack = require("webpack");
module.exports = {
    entry: {
        main: ["./src/index.js"]
    },
    output: {
        path: path.join(assets, "dist"),
        filename: "bundle-[hash].js"
    },
    module: {
        loaders: [{
                test: /\.js$/,
                loader: "babel",
                query: {
                    'presets': ['es2015', 'stage-0']
                }
            },
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract("css-loader?")
            }
        ]
    },
    plugins: []
};

webpack的概念

如果你想要开始学会使用webpack，只需要了解4个核心概念：entry, output, loaders, and plugins。

这些东西都存放在 webpack.config.js 配置文件当中。

Entry

文件入口，这是存放你需要打包的文件或者整个文件夹，有以下2种方式：

单入口语法

1
2
3
4
5
const config = {
  entry: './path/to/my/entry/file.js'
};
module.exports = config;

等价于：

1
2
3
4
5
const config = {
  entry: {
    main: './path/to/my/entry/file.js'
  }
};

在这里同样可以放置数组。

对象语法

1
2
3
4
5
6
const config = {
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  }
};

这种方式是最繁琐，但是可扩展性最高。

vendors是公共库

Output

用法

1
2
3
4
5
6
7
8
const config = {
  output: {
    filename: 'bundle.js',
    path: '/home/proj/public/assets'
  }
};
module.exports = config;
  • filename 用于输出文件的文件名。
  • 输出目录的 path 推荐使用绝对路径。

多个入口起点

1
2
3
4
5
6
7
8
9
10
11
12
{
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
}
// 写入到硬盘：./dist/app.js, ./dist/search.js

占位符

  • [hash]模块标识符(module identifier)的 hash
  • [chunkhash]chunk 内容的 hash
  • [name]模块名称
  • [id]模块标识符(module identifier)
  • [file]模块文件名称
  • [filebase]模块 basename
  • [query]模块的 query，例如，文件名 ? 后面的字符串

查看链接

Loader

示例

1
2
npm install --save-dev css-loader
npm install --save-dev ts-loader

css-loader 是css解析器
ts-loader 是typescript解析器

还有其他的：

loaders列表

1
2
3
4
5
6
7
8
module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-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
                    }
                }
            ]
        }
    ]
}

查看详细

Plugins

用于解决loaders无法解决的问题

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
const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
const webpack = require('webpack'); //访问内置的插件
const path = require('path');
const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    loaders: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};
module.exports = config;