webpack4基本知识总结

一、webpack基本结构

（1）webpack是什么

• 前端资源构建工具，静态模块打包器(module bundler)
• 对于webpack而言，前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理
• 根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)
  

（2） 5个核心概念

1. entry

webpack 入口，指示webpack以哪个文件为入口起点开始打包，分析构建内部依赖图

指定入口值

入口值可以为下面四种指定方式

a. string

entry: 'src/index.js'

单入口，打包形成一个chunk，输出一个bundle文件

b. 数组

entry: ['./src/index.js', './src/add.js']

多入口， 所有入口文件最终只会形成一个chunk, 输出出去只有一个bundle文件。
应用场景：在HMR功能中让html热更新生效

c. 对象

module.exports = {
  entry: {
    index:  './src/count.js'
    add: './src/add.js'
  },
  output: {
    filename: '[name].js',
    path: resolve(__dirname, 'build')
  },
  plugins: [new HtmlWebpackPlugin()],
  mode: 'development'
};

多入口，有几个入口文件就形成几个chunk，输出几个bundle文件，此时chunk的名称是 key

d. 特殊类型

entry: {
    //所有入口文件最终只会形成一个chunk, 输出出去只有一个bundle文件。
    index: ['./src/index.js', './src/count.js'], 
    // 形成一个chunk，输出一个bundle文件。
    add: './src/add.js'
  },

2. output

将webapck打包后的资源输出出去，以及如何命名
组成如下：

• filename：文件名（民称+目录）
• path：输出文件目录
• publicPath：所有资源引入公共路径
• chunkFilename：非入口chunk的名称
• library：整个库向外暴露的变量名
• libraryTarget：变量名添加到哪

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    // 文件名称（指定名称+目录）
    filename: 'js/[name].js',
    // 输出文件目录（将来所有资源输出的公共目录）
    path: resolve(__dirname, 'build'),
    // 所有资源引入公共路径前缀 --> 'imgs/a.jpg' --> '/imgs/a.jpg'
    publicPath: '/',
    chunkFilename: 'js/[name]_chunk.js', // 非入口chunk的名称
    // library: '[name]', // 整个库向外暴露的变量名
    // libraryTarget: 'window' // 变量名添加到哪个上 browser
    // libraryTarget: 'global' // 变量名添加到哪个上 node
    // libraryTarget: 'commonjs'
  },
  plugins: [new HtmlWebpackPlugin()],
  mode: 'development'
};

3. loader

loader可以让webpack去处理那些非 JavaScript 文件

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'js/[name].js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      // loader的配置
      {
        test: /\.css$/,
        // 多个loader用use
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.js$/,
        // 排除node_modules下的js文件
        exclude: /node_modules/,
        // 只检查 src 下的js文件
        include: resolve(__dirname, 'src'),
        // 优先执行
        enforce: 'pre',
        // 延后执行
        // enforce: 'post',
        // 单个loader用loader
        loader: 'eslint-loader',
        options: {}
      },
      {
        // 以下配置只会生效一个
        oneOf: []
      }
    ]
  },
  plugins: [new HtmlWebpackPlugin()],
  mode: 'development'
};

4. plugins

插件(Plugins)可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩， 一直到重新定义环境中的变量等。

例如上面的代码中一直使用的html-webpack-plugin ，作用是自动在webpack打包时创建一个空的html文件，并且自动 引入打包输出的所有资源

 plugins: [
    new HtmlWebpackPlugin({
      // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（JS/CSS）
      template: './src/index.html'
    })
  ],

5. mode

mode指示webpack使用相应的模式配置

选项	描述	特点
development	会将 DefinePlugin 中 process.env.NODE_ENV 的值设置 为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。	能让代码本地调试运行的环境
production	会将 DefinePlugin 中 process.env.NODE_ENV 的值设置 为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 TerserPlugin。	能让代码优化上线运行的环境

二、webpack基本配置

（1）基本配置

// resolve 用来拼接绝对路径的方法
const { resolve } = require('path');
module.exports = {
  // webpack 配置
  // 入口起点
  entry: './src/index.js', // 输出
  output: {
    // 输出文件名
    filename: 'built.js',
    // 输出路径
    // __dirname nodejs 的变量，代表当前文件的目录绝对路径
    path: resolve(__dirname, 'build'),
  },
  // loader 的配置
  module: {
    rules: [
      // 详细 loader 配置
      // 不同文件必须配置不同 loader 处理
      {
        // 匹配哪些文件
        test: /\.css$/,
        // 使用哪些 loader 进行处理
        use: [
          // use 数组中 loader 执行顺序:从右到左，从下到上 依次执行
          // 创建 style 标签，将 js 中的样式资源插入进行，添加到 head 中生效
          'style-loader',
          // 将 css 文件变成 commonjs 模块加载 js 中，里面内容是样式字符串
          'css-loader',
        ],
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          // 将 less 文件编译成 css 文件 // 需要下载 less-loader 和 less
          'less-loader',
        ],
      },
    ],
  },
  // plugins 的配置
  plugins: [
    // 详细 plugins 的配置
  ],
  // 模式
  mode: 'development', // 开发模式 // mode: 'production'
};

（2）基本概念

1. 创建文件
2. 运行指令

• 开发环境指令:webpack src/js/index.js -o build/js/built.js --mode=development
• 功能:webpack 能够编译打包 js 和 json 文件，并且能将 es6 的模块化语法转换成

浏览器能识别的语法。

• 生产环境指令:webpack src/js/index.js -o build/js/built.js --mode=production
• 功能:在开发配置功能上多一个功能，压缩代码。

3. 结论
   webpack 能够编译打包 js 和 json 文件。
   能将 es6 的模块化语法转换成浏览器能识别的语法。 能压缩代码。
4. 问题
   不能编译打包 css、img 等文件。
   不能将 js 的 es6 基本语法转化为 es5 以下语法。