webpack教程

从 webpack v4.0.0 开始，可以不用引入一个配置文件。然而，webpack 仍然还是高度可配置的。在开始前你需要先理解四个核心概念：

入口(entry)
输出(output)
loader
插件(plugins)




入口(entry)


webpack.config.js      默认值为 ./src


出口(output)


webpack.config.js   默认值为 ./dist
 

const path = require('path');
module.exports = { entry: './src/to/my/entry/file.js',
 output: {
       path: dist.resolve(__dirname, 'dist'),
       filename: 'my-first-webpack.bundle.js'
  }
};


loader

loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

在 webpack 的配置中 loader 有两个目标：

1. test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
2. use 属性，表示进行转换时，应该使用哪个 loader。

webpack.config.js

const path = require('path');

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

module.exports = config;


插件(plugins)

想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。
webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件

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

module.exports = config;



模式

通过选择 development 或 production 之中的一个，来设置 mode 参数，你可以启用相应模式下的 webpack 内置的优化. 【  生产模式 / 开发模式 】

module.exports = {
  mode: 'production'  
};

入口起点(entry points)
单个入口（简写）语法

webpack.config.js


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


当你向 entry 传入一个数组时会发生什么？向 entry 属性传入「文件路径(file path)数组」将创建“多个主入口(multi-main entry)”。在你想要多个依赖文件一起注入，并且将它们的依赖导向(graph)到一个“chunk”时，传入数组的方式就很有用。

用法：entry: {[entryChunkName: string]: string|Array<string>}

webpack.config.js

const config = {
  entry: { app: './src/app.js', vendors: './src/vendors.js'
  }
};

多页面应用程序
const config = {
  entry: {
         pageOne: './src/pageOne/index.js',
         pageTwo: './src/pageTwo/index.js',
         pageThree: './src/pageThree/index.js'
  }  
};

输出(output)




const config = {
  output: {
    filename: 'bundle.js',
    path: '/home/proj/public/assets'
  }
};

module.exports = config;

此配置将一个单独的 bundle.js 文件输出到 /home/proj/public/assets 目录中。





多个入口起点



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

// 写入到硬盘：./dist/app.js, ./dist/search.js




以下是使用 CDN 和资源 hash 的复杂示例：

output: {
  path: "/home/proj/cdn/assets/[hash]",
  publicPath: "http://cdn.example.com/assets/[hash]/"
}

在编译时不知道最终输出文件的 publicPath 的情况下，publicPath 可以留空，并且在入口起点文件运行时动态设置。如果你在编译时不知道 publicPath，你可以先忽略它，并且在入口起点设置 __webpack_public_path__。


__webpack_public_path__ = myRuntimePublicPath    // 剩余的应用程序入口

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


webpack.config.js

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






使用 loader




配置[Configuration]

module.rules 允许你在 webpack 配置中指定多个 loader。 这是展示 loader 的一种简明方式，并且有助于使代码变得简洁。同时让你对各个 loader 有个全局概览：


module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }
        ]
      }
    ]
  }




内联

可以在 import 语句或任何等效于 "import" 的方式中指定 loader。使用 ! 将资源中的 loader 分开。分开的每个部分都相对于当前目录解析。

import Styles from 'style-loader!css-loader?modules!./styles.css';


通过前置所有规则及使用 !，可以对应覆盖到配置中的任意 loader。
选项可以传递查询参数，例如 ?key=value&foo=bar，或者一个 JSON 对象，例如 ?{"key":"value","foo":"bar"}。
尽可能使用 module.rules，因为这样可以减少源码中的代码量，并且可以在出错时，更快地调试和定位 loader 中的问题。


CLI


你也可以通过 CLI 使用 loader：
webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'

这会对 .jade 文件使用 jade-loader，对 .css 文件使用 style-loader 和 css-loader。



……

插件(plugins)


插件目的在于解决 loader 无法实现的其他事。
webpack 插件是一个具有 apply 属性的 JavaScript 对象。apply 属性会被 webpack compiler 调用，并且 compiler 对象可在整个编译生命周期访问。


ConsoleLogOnBuildWebpackPlugin.js

const pluginName = 'ConsoleLogOnBuildWebpackPlugin';

class ConsoleLogOnBuildWebpackPlugin {
    apply(compiler) {
        compiler.hooks.run.tap(pluginName, compilation => {
            console.log("webpack 构建过程开始！");
        });
    }
}

compiler hook 的 tap 方法的第一个参数，应该是驼峰式命名的插件名称。建议为此使用一个常量，

以便它可以在所有 hook 中复用。






配置

webpack.config.js


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: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;



Node API
some-node-script.js


 const webpack = require('webpack'); //访问 webpack 运行时(runtime)
     const configuration = require('./webpack.config.js');

     let compiler = webpack(configuration);
     compiler.apply(new webpack.ProgressPlugin());

     compiler.run(function(err, stats) {
        // ...
     });

你知道吗：以上看到的示例和 webpack 自身运行时(runtime) 极其类似。wepback 源码中隐藏有大量使用示例，你可以用在自己的配置和脚本中。

配置(configuration)




基本配置

webpack.config.js



var path = require('path');

module.exports = {
  mode: 'development',
  entry: './foo.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'foo.bundle.js'
  }
};



多个 Target

查看：导出多个配置


使用其他配置语言

webpack 接受以多种编程和数据语言编写的配置文件。
查看：配置语言

模块(modules)




……