webpack使用教程(二)核心

这是我参与「掘金日新计划 · 8 月更文挑战」的第14天，点击查看活动详情

1. Entry

Entry 用来指定webpack的打包入口，对于非代码比如图片、字体依赖也会不断加入到依赖图中。

Entry的用法

单入口:entry是一个字符串

module.exports = {
	entry:'./path/to/my/entry/files.js'
}

多入口: entry 是一个对象

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

2. Output

Output 用来告诉webpack如何将编译后的文件输出到磁盘

Output的用法

单入口

module.exports = {
    mode: 'production',
    entry: {
        app: './src/index.js',
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'
    },
}

多入口

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

3. Loaders

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

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

常见的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

loader 用法

做一个raw-loader 例子，可让您的文件作为字符串导入

npm install --save-dev raw-loader

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

4. Plugins

插件用于bundle 文件的优化，资源管理和环境变量注入

作用于整个构建过程

常见的Plugins 有哪些？

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

Plugins 用法

这里做一个HtmlWebpackPlugin的例子

安装 插件

npm install --save-dev html-webpack-plugin

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 引入关于html的插件

plugins:[
  new HtmlWebpackPlugin({ // 放入plugin数组里
    template:'./html/index.html' 
  })
]

5. mode

Mode 用来指定当前的构建环境是: production、development还是node

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

选项	描述
development	设置process.env.NODE_ENV 的值为devlopment .开启NamedChunksPlugin 和 NameModulesPlgin
production	设置process.env.NODE_ENV 的值为production。开启FlageDendencyUsagePlugin,FlageIncludeChunksPlugin,ModuleConcatenationPlugin,NoEmitOnErrorsPlugin,OccurrenceOrderPlugin,SideEffectsFlagPlugin 和 TerserPlugin
none	不开启任何优化选项