webpack中的基本概念

四个核心概念：

入口（entry）
输出（output）
loader
插件（plugins）

入口

指定入口文件的路径，作为构建内部依赖图的起点。

在webpack.config.js配置文件中：

1
2
3

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

出口

在配置中添加output字段，指定打包好的文件放置路径和文件名，默认放在./dist文件夹，文件名默认为bundle.js,

在webpack.config.js配置文件中：

const path = require('path');//引入node.js的path模块

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'), //路径
    filename: 'my-first-webpack.bundle.js' //文件名
  }
};

loader

loader的引入，可以webpack把那些非js文件也当成模块一样处理，简单来说，就是我们的项目中不止有js文件还会有.css，.html，.vue等文件，我们需要引入对应的loader来让webpack能够处理这些文件，并把它们添加到依赖图中去。

loader用在配置文件中的module字段，这里的module是一个对象，使用loader需要对module对象的rules属性进行设置，rules是一个数组，可以在里面进行多个loader配置，rules中的每一项都是一个有两个属性的对象：

test — 正则表达式，匹配需要处理的文件
run — 对应的loader名

在webpack.config.js配置文件中：

//如果我们想要处理.txt的文件。
//当然我们就需要通过npm安装raw-loader

const path = require('path');

const config = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

module.exports = config;

插件

当我们需要执行特殊任务的时候，就会用到插件，也可以理解成在webpack中引入了一些包，用来让webpack执行特定的任务。

通过npm安装插件
通过require()导入插件
在配置中的plugins字段中new一个插件实例使用它, plugins是个数组，所以可以有多个插件

在webpack.config.js配置文件中：

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件

const config = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;