webpack手册-快速入门

Posted 2021-04-29 前端程序员手册

写在前面

这是阅读官网文档后的个人总结，如有纰漏欢迎指正

webpack的定义

webpack是当下最流行的一个javascript模块打包工具，当你使用webpack打包你的webapp时，它会把整个程序的运行起来所需要的代码文件生成生成一个依赖关系图，然后把这些代码生成输出为一个或多个文件。
webpack是高度可配置的，但我们只需要把以下的四个概念弄清楚就可以把它给跑起来。

1. Entry

2. Output

3. Loaders

4. Plugins

Entry

entry 是用于声明我们要从那里开始打包程序，webpack会根据这个入口文件以及其依赖的所有文件或者第三方库生成一个内部依赖关系图。

声明单个入口文件的例子。

module.exports = {
  entry:'./app.js'
}

声明多个入口文件

module.exports = {
  entry:{
    app:'./src/app.js',
    vendors:'./src/vendors.js'
  }
}

我们可以通过多入口的方式把app里的第三方库生成一个或多个打包文件，这样一方面可以降低每个打包文件的体积有利于浏览器的并行资源下载，另一方面也可以把这些比较稳定的文件在浏览器的缓存中固定下来，不用每次地从服务器摘取。

Output

ouput是用于告诉webpack如果输出打包文件的配置项,我们常会在这里指定生成文件的目录，文件名命名方式等等。

const path = require('path');
module.exports = {
  entry:'./src/app.js',
  output:{
    path: path.resolve(__dirname, 'dist'),
    filename:'helloworld.bundle.js'
  }
}

上面的output.path需要使用path库来取得绝对路径，因为webpack在这个点上只认绝对路径。

通过以上代码我们可以看出path是指定我们要把文件生成到那个目录，而filename是指我们要把生成文件命名为helloworld.bundle.js

Loaders

webpack它默认只能识别javascript文件，也就是说像什么scss, less, es6, svg...都是它不认的，而loaders的工作就是为了把那些webpack不认识的文件转换成webpack可以处理的javascript。

所以如果那天你想创作一自己的前端语言，你只要做一个能理解这门语言的loader就可以了。

const path = require('path');
const config = {
  entry:'./src/app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'helloworld.bundle.js'
  },
  module: {
   rules:{
      { test: /\.txt$/, use: 'raw-loader' }
   }
  }
};
module.exports = config;

可以看到我们是通过module.rules来配置我们的loader的，上面我们配置了一个raw-loader 它可以把txt文件转换成webpack可以打包的文件。

有了raw-loader之后，我们就可以在我们的代码中通过 import 或者 requie 来引入使用txt文件

Plugins

现在我们有了Entry, output, loader, 似乎已经有了生成一个webapp所需要的大部分功能

但是对于一个完美的webapp来说这些还远远不够，我们需要更高级的方式来处理像压缩、混淆、代码合并等等。

Plugin 正正是用来处理这些高级处理的。

const htmlWebpackPlugin = require('html-webpack-plugin'); 
const webpack = require('webpack'); 
const path = require('path');
const config = {
  entry:'./src/app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'helloworld.bundle.js'
  },
  module: {
   rules:{
      { test: /\.txt$/, use: 'raw-loader' }
   }
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};
module.exports = config;

从以上代码可以看到我们通过plugins来声明插件，而插件是通过require的方式来引入的，插件可以通过npm进行获取，也有的是webpack内置的插件。