webpack的核心概念

核心概念

1. 入口(entry)

入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

webpack.config.js

• 单个入口写法

module.exports = {
  // entry: './path/to/my/entry/file.js'
  // 等同于上面的写法
  entry: {
  	main: './path/to/my/entry/file.js'
  }
};

• 多个入口的写法

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

如果没有指定output的filename，那么默认生成的文件名是配置路径前面的key值

2.出口（output）

output 属性告诉 webpack 在哪里输出它所创建的包，以及如何命名这些文件，默认值为 ./dist。

webpack.config.js

• 不带hash

// path模块是node.js的原生模块，用于处理路径的问题
const path = require('path');

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

• 带hash(三种hash模式)

  • hash：项目中所有文件共用相同的hash值
  • chunkHash：项目中相互依赖的文件共用相同的hash值，例如main.js引入main.css，那么打包后，他们会生成相同的hash
  • contentHash：项目中所有文件均有独立的hash值

  上面三种hash均可以添加位数限制 [hash:8]

// path模块是node.js的原生模块，用于处理路径的问题
const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
  	// 指定打包生成后的文件路径
    path: path.resolve(__dirname, 'dist'),
    // 指定生成的文件名
    filename: '[name].[hash:8].js'
  }
};

3.loader

webpack 只能理解 JavaScript 和 JSON 文件，loader 用于转换webpack不能读取的文件类型

在更高层面，在 webpack 的配置中 loader 有两个属性：

1. test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
2. use 属性，表示进行转换时，应该使用哪个 loader。

webpack.config.js

const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ]
  }
};

1. 在 webpack 配置中定义 rules 时，要定义在 module.rules 而不是 rules 中

2. 使用正则表达式匹配文件时，你不要为它添加引号

3. loader执行的顺序是后写的先执行

4. 先执行css-loader处理css，然后再执行style-loader把处理好的结果动态插入js中，运行时再插入网页头部中

4.插件（plugins）

loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务

webpack.config.js

// 通过 npm 安装,主要作用自动生成主页index.html
const HtmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = {
    plugins: [
    new HtmlWebpackPlugin({
      // <%= htmlWebpackPlugin.options.title %>模板语法，模板可使用
      title: '自定义',
      filename: 'custom.html',
      // 指定模板文件
      template: 'public/index.html'
    })
  ]
}

5.模式

1. development不会压缩代码

2. production会压缩代码

webpack.config.js

module.exports = {
  mode: 'production'
}

或者你可以在package.json文件的scripts配置模式以及指定webpack的config文件

"scripts": {
    "start": "webpack --mode=development --config=scripts/webpack.config.js",
  }