一、webpack核心概念

wepack主要有四个核心，entry(入口)、output （出口）、loader、plugin

1、entry

entry分为单入口和多入口

单入口

entry是一个字符串

module.exports = {
  entry: './path/to/my/entry/file.js',
};

多入口

entry 是一个对象

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

2、output 打包输出路径

单入口

  entry: './path/to/my/entry/file.js',
  output:{
     filenam:'bundle.js',
     path:__diraname+'/dist'
  }
};

多入口

通过占位符[name]来确保文件的唯一

module.exports = {
  entry: {
      app:'./src/app.js','
      search:'./src/search.js'
  }，
  output:{
      filename:'[name].js',
       path:__diraname+'/dist'
  }
};

3、loader

webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效模块

loader 有两个属性：

test 属性，识别出哪些文件会被转换。
use 属性，定义出在进行转换时，应该使用哪个 loader。

常见的loader:

名称	描述
babel-loader	转换ES6，ES7等JS新特性语法
css-loader	转换.css文件加载和解析
less-loader	转换.less文件加载和解析
ts-loader	转换ts转换JS
file-loader	进行图片、字体等的打包
raw-loader	将文件以字符串的形式导入
thread-loader	多进程大包JS和CSS
style-loader	把 CSS以style的形式插入到 DOM 中

4、plugin

插件用于budle文件的优化，资源管理和环境变量的注入。作用于整个构建过程

5、mode

通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为 production

6、常用的loader使用介绍

1、解析ES6

使用babel-loader ，并配置.babelrc

需要安装：@babel/core @babel/preset-env bable-loader

module.exports = {
  entry: {
      app:'./src/app.js','
      search:'./src/search.js'
  }，
  output:{
      filename:'[name].js',
       path:__diraname+'/dist'
  },
  module:{
      rules:[
          {
              test:/\.js$/,
              use:'babel-loader'
          }
      ]
  }
};

.babelrc增加babel preset配置

    “presets”:["@babel/preset-env"]

2、解析CSS、less

需要配置css-loader

less 需要安装less、less-loader

module:{
    rules:[
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader','less-loader']
      },
    ]
  }

2、解析img

可以使用file-loader 解析，也可以使用url-loader,url-loader 可是设置最小资源自动为baser64

 module:{
    rules:[
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader','less-loader']
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [{
            loader:'url-loader',
            options:{
                limit:10240
            }
        
        }]
      },
    ]
  },

webpack基础篇