01.webpack基本概念

01.通过npm script启动webpack

在package.json中增加：

{
    "scripts": {
      "build": "webpack"
  }
}

原理：局部安装的模块，在node_modules/.bin目录创建软连接

02. entry

entry用来指定webpack打包的入口。
为什么需要entry？
这离不开webpack构建的机制，webpack是一个模块打包器，任何资源（图片、字体、css等等）webpack都会把它们当做一个个的模块，模块间又存在依赖关系。因此，webpack根据entry找到它的依赖，然后这些依赖可能又依赖别的模块，这样就形成一棵依赖树。

• 用法
  单入口：entry是一个字符串。适合单页应用

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

多入口：entry是一个对象。适合多页应用

module.exports = {
  enrty: {
    app: './src/app.js',
    adminApp: './src/adminApp.js'
  }
}

03.output

output用来告诉webpack如何将编译后的文件输出到磁盘：输出到磁盘的什么地方？输出的文件名又是什么？

• 用法

  • 单入口配置

  const path = require('path')
  module.exports = {
    entry: './path/to/my/entry/file.js',
    output: {
      filename: 'bundle.js',
      path: path.join(__dirname, 'dist')
    }
  }
  

  • 多入口配置

  const path = require('path')
  module.exports = {
    entry: {
      app: './src/app.js',
      adminApp: './src/adminApp.js'
    }
    output: {
      filename: '[name].js', // 通过占位符来确保文件名称的唯一
      path: path.join(__dirname, 'dist')
    }
  }
  

04.loaders

webpack开箱即用只支持js和json两种文件类型，通过loaders去支持其他文件类型并且把它们转化成有效的模块，并且可以添加到依赖图中。

loaders本身是一个函数，接收源文件作为参数，返回转换的结果。

常见的loaders

名称	描述
babel-loader	转换ES6、ES7等新特性
css-loader	支持.css文件的加载和解析
less-loader	将less文件转为css
ts-loader	将TS转为JS
file-loader	进行图片、字体等的打包
raw-loader	将文件以字符串的形式导入
thread-loader	多进程打包JS和CSS

• 用法

const path = require('path')
module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.txt$/, // 指定匹配规则
        use: 'raw-loader' // 指定要用的loader
      }
    ]
  }
}

05.plugins

loaders用于其他文件格式的转化，plugins用于bundle文件的优化，资源管理和环境变量注入，作用于整个构建过程。（任何loader做不到的事情都可以用plugin来做）

常见的plugins

名称	描述
CommonsChunkPlugin	将chunks相同的模块代码提取成公共js
CleanWebpackPlugin	清理构建目录
ExtractTextWebpackPlugin	将CSS从bundle文件里提取成一个独立的css文件
CopyWebpackPlugin	将文件或者文件夹拷贝到构建的输出目录
HtmlWebpackPlugin	创建html文件去承载输出的bundle
UglifyWebpackPlugin	压缩js
ZipWebpackPlugin	将打包出的资源生成一个zip包

用法

const path = require('path')
module.exports = {
  output: {
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
}

06.mode

mode用来指定当前的构建环境是： production、development还是none。

设置mode可以使用webpack内置的函数，默认值为production

mode的内置函数功能

选项	描述
development	设置process.env.NODE_ENV的值为developemnt，开启NamedChunksPlugin和NamedModulesPlugin
production	设置process.env.NODE_ENV的值为production，开启FlagDependencyUsagePlugin，FlagIncludedChunksPlugin，ModuleConcatenationPlugin，NoEmitOnErrorsPlugin，OccurrenceOrderPlugin，SideEffectsFlagPlugin和TerserPlugin
none	不开启任何优化选项