1.webpack由浅入深

发布于 2022年 04月 30日 06:49

1.webpack概念:

webpack是一个静态模块打包机, webpack处理应用程序时,把一个项目当作整体,通过一个给定的主文件开始找到所有的依赖文件,构建一个依赖关系图(这个依赖关系图包含应用程序需要的每个模块),然后使用loaders处理它们,最后打包成一个或多个浏览器可识别的js文件。

2.四个概念核心:

1.入口 (entry):

入口:指示webpack应该使用哪个模块,来作为构建内部依赖关系图的开始。 进入入口起点后,webpack会找出这个入口起点的所有依赖的模块和库。

 例子:
   module.exports = {
  entry: './path/index.js'
    };
    

2.出口(output):

出口:告诉webpack在哪里输出它所创建的bundles,以及如何命名这些文件。

  例子:
  module.exports = {
  entry: './path/index.js',
  output: {
   path: path.resolve(__dirname, './dist'),
   filename: 'my-first-webpack.bundle.js'
  }
  };

3.loader:

loader:webpack本身只能理解js,loader就是将所有类型的文件转换为webpack能够处理的模块,然后让webpack去处理这些文件。

loader属性:

  1. test :标识出应该被对应的 loader进行转换的某个或某些文件

  2. use :进行转换时,应该使用哪个 loader

    例子:
    const config = {
     output: {
      filename: 'index.bundle.js'
      },
      module: {
      rules: [
      {
       test: /\.css$/,
       use: 'css-loader'
      }
      ]
       }
      };
    

注意:对一个单独的 module 对象定义了 rules 属性,里面包含两个必须属性:test 和 use

4.插件(plugins):

插件:扩展weboack的功能,执行范围更广的任务,可以用来处理各种各样的任务。

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

推荐文章