webpack的四个基本概念（入口，出口，loader，插件）

官方介绍

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

安装

2020年10⽉webpack5.0.0正式发布，此处安装webpack4以及配置的cli3

• npm i webpack@4 webpack-cli@3 -g
• npm i webpack@4 webpack-cli@3 -D
• webpack --help : 查看webpack的相关命令

webpack的四个核心概念

• 入口（entry） : 指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始
• 出口（output） : 告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist
• loader : 让 webpack 能够去处理那些非 JavaScript 文件
  loader的两个属性 :
  1.test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
  2. use 属性，表示进行转换时，应该使用哪个 loader。
  loader的基本用法
  webpack.config.js

const path = require('path');

const config = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};
//当你碰到「在 require()/import 语句中被解析为 '.txt' 的路径」时，在你对它打包之前，先使用 raw-loader 转换一下。
module.exports = config;

• 插件（plugins） : 插件的作用范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。

具体用法

const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin') //通过npm安装
const resolve = (dir) => {
  return path.resolve(__dirname, '../', dir)
}
module.exports = {
	//模式 ， 包括devement和production
  mode: 'development', 
  //入口 ， 有三种写法，推荐对象形式
  // entry: '../src/main.js', // string 
  // entry: ['../src/main.js'] // array
  entry: {
    test: resolve('src/test.js'),
    app: resolve('src/main.js'),
  },
  //出口
  output: {
    path: resolve('dist'), //打包的路径
    filename: '[name].js' //name的值可以理解为entry的key值
  },
  plugins: [ // 插件 --- 插件选项是一个数组
    // new HTMLWebpackPlugin() // 默认生成dist/index.html页面，并且自动引入了 app.js 
    // 修改配置的API https://github.com/jantimon/html-webpack-plugin#configuration
    new HTMLWebpackPlugin({
      title: 'hello webpack', // 设置默认打包的index.html页面的标题
      // favicon: resolve('config/favicon.ico'), // 设置默认打包的index.html页面的引入的图标 一般走页面模版
      filename: 'index.html', // 设置打包的页面文件的 文件名称
      template: resolve('public/index.html'), // 页面模版（title失效）
      inject: true, // 默认就是true = body ｜ head | true('body') | false 是否自动引入js以及引入js为位置
      minify: {// 优化选项
        collapseWhitespace: true, // 合并代码
        removeAttributeQuotes: true, // 去除引号
        removeComments: true
      },
      chunks: ['app', 'test'], // 切忌加后缀，与entry的key值相同
      chunksSortMode: 'manual' // 说明打包的排序问题
    })
  ]
}