webpack学习之webpack概念

webpack是一个现代JavaScript应用程序的静态模块打包器，当webpack处理应用程序时，会递归构建一个依赖关系图，将程序中所需要的每个模块，打包成一个或者多个bundle。

 

webpack有四个核心的概念：

入口entry，

输出output，

loader，

plugins。

 

入口

入口起点是告诉webpack应该使用哪个模块，作为构建程序内部依赖图的开始。

在webpack中是通过配置entry属性，来指定一个入口，也可以是多个。

例子：

const config = {
 
  entry: './path/file.js',
  
}

出口

出口是告诉webpack将打包好后输出的文件放到哪里，也可以命名这些文件。

其中默认的输出路径是/dist.

在webpack中的配置如下：

const config = {
  
  entry: './path/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'), //输出路径
    filename: 'my.bundle.js' //文件名
  },
 
}

loader

loader可以让webpack去处理那些非JavaScript文件，将这些文件转换成webpack可以处理的模块。

本质上，loader会将所有类型的文件转换成应用程序的依赖图可以直接引用的模块。

loader中有两个配置项：

1，test，用于标识文件类型，如css，html，jpg等等。

2，use, 表示用哪个loader来转换标识的文件。

const config = {
  mode: 'development',
  entry: './path/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my.bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.txt$/,  //txt文件
        use: 'raw-loader' //使用raw-loader来转换txt文件
      }
    ]
  }
  
}

插件

插件是更强大的应用，可以执行比loader范围更广更深的任务，从打包到压缩，一直到重新定义环境变量。

可以使用require()来引入插件，并将其配置到plugins数组中。多数插件可以通过option自定义，也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要使用new操作符来创建该插件的实例。

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin') //引入html-webpack-plugin插件
const webpack = require('webpack')

const config = {
  mode: 'development', //设置webpack的模式为开发或者生产
  entry: './path/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my.bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.txt$/,
        use: 'raw-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: '/aa.html'}),
    aa
  ]
}