Webpack基础知识(一)

webpack 由入口引申出来的目录树进行打包依赖

安装

安装 webpack 和 webpack-cli

npm i webpack webpack-cli -D

Entry

用来指定打包的入口，分为多入口和单入口，单入口是一个字符串值，多入口是一个 对象，里面的键值对对应着多个入口

// 用法
// 单入口
module.exports = {
  entry: '/src/index.js'
}

// 多入口
module.exports = {
  entry: {
    index: '/src/index.js',
    detail: '/src/detail.js'
  }
}

output

用来指定打包的输出，只有一个 output ，单入口的时候可以写死 filename ，多入口哦的时候一般利用占位符的概念，name 是名称

// 用法
output: {
  filename: '[name].js',
  path: path.join(__dirname, 'dist')
}

Loaders

webpack 开箱即用支持 js 和 json 两种文件类型，通过 Loaders 去支持其他文件类型并且把他们转化成有效的模块，并且可以添加到依赖图中。它本身是一个函数，接受源文件作为参数，返回转换的结果。不支持的文件类型通过 Loaders 解析。

常用 Loaders ：

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

// 用法
module: {
  rules: [
    {
      test: /\.txt$/, // 指定匹配的规则
      use: 'raw-loader' // 指定使用的 loader 名称
    }
  ]
}

Plugins

增强 webpack 的功能，用于打包优化、资源管理和环境变量注入，作用于整个构建过程，常用插件：

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

// 用法
plugins: [
  new HtmlWebpackPlugin({
    template: '/src/index.html'
  })
]

Mode

mode 用来指定当前的构建环境，有三个值： production、development 和 none ，设置 mode 可以自动启动 webpack 对应的一些功能，默认是 production

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