定义

用于现代js应用程序的静态模块打包工具

核心

入口（entry）

简单的理解就是告诉webpack我要从那个模块来作为构建内部依赖图的开始

dependOn：当前入口所依赖的入口
filename：输入的文件名称
import：启动需要加载的模块
library：指定 library 选项，为当前 entry 构建一个 library
runtime：运行时 chunk 的名字，设为 false 以避免一个新的运行时 chunk
publicPath：

module.exports = {
  entry: './path/to/my/entry/file.js', //也支持数组传递多个路径 entry: ['./src/file_1.js', './src/file_2.js'],
  output:{
      filename:'bundle.js'
  }
};


module.exports = {
  entry: {
    a2: 'dependingfile.js',
    b2: {
      dependOn: 'a2',
      import: './src/app.js',
    },
  },
}

输出（output）

通过配置output来告诉webpack向硬盘中写入编译文件，不论有多少个entry，但是只能指定一个output配置

module.exports = {
  output: {
    filename: 'bundle.js',
  },
};

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

// 写入到硬盘：./dist/app.js, ./dist/search.js

loader

用于对模块的源代码进行转换，例如less要转化为css,ts转化为js

npm install --save-dev css-loader ts-loader

//配置

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' },
    ],
  },
};

//配置多个
module.exports={
    module:{
        rules:[{
            test: /\.css$/,
            use: [
              { loader: 'style-loader' },
              {
                loader: 'css-loader',
                options: {
                  modules: true,
                },
              },
              { loader: 'sass-loader' },
            ],
        }]
    }
}

插件（plugins）

插件目的在于解决 loader 无法实现的其他事，由于可以携带参数/选项，所以在webpack的配置的过程中向plugins属性传入一个new 实例

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); // 访问内置的插件
const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader',
      },
    ],
  },
  plugins: [
    new webpack.ProgressPlugin(),
    new HtmlWebpackPlugin({ template: './src/index.html' }),
  ],
};

//ProgressPlugin 用于自定义编译过程中的进度报告
//HtmlWebpackPlugin 将生成一个 HTML 文件，并在其中使用 script 引入一个名为 my-first-webpack.bundle.js 的 JS 文件

模式（mode）