webpack基础

webpack核心概念

• 入口(entry)： 指示 webpack 应该使用哪个模块

// 可以通过webpack configuration中配置entry属性指定n个不同的入口起点
module.exports = {
   
  entry: './path/to/my/entry/file.js',
}

• 输出(output)：告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。

// 输出文件的值默认是./dist/main.js，生成文件默认放置在 ./dist 文件夹中
// output属性： path，filename
const path = require('path')
module.exports = {
   
  entry: './path/to/my/entry/file.js',
  output: {
   
    path: path.resolve(__dirname, 'dist'), // bundle的文件地址
    filename: 'my-first-webpack.bundle.js', // bundle的文件名称
  },
};

• loader：webpack 只能理解 JavaScript 和 JSON 文件，loader 让 webpack 能够处理其他类型的文件，并将他们转化为模块。

// loader属性： test，use
module.exports = {
    
  module: {
   
    rules: [
    {
    test: /\.txt$/,  // 识别出哪些文件会被转换。
      use: 'raw-loader'  // 定义出在进行转换时，应该使用哪个 loader。
     }],
  }
}

• 插件(plugin)：打包优化，资源管理

// require引用 => 添加到plugins中 => 使用new创建插件实例
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 module.exports = {
    
  plugins: [new HtmlWebpackPlugin({
    template: './src/index.html' })],
}

• 模式(mode)：development, production 或 none 之中的一个，来设置 mode 参数

module