Webpack

webpack相关知识点

entry 入口

入口起点指示webpack应该使用哪个模块，来作为构建其内部依赖图的开始。默认为./src/index.js,但可以通过配置entry属性,指定一个(或多个)不同的入口起点 webpack.config.js

  module.exports = {
    entry:'./path/to/my/entry/file.js'
  }

output 输出

output属性告诉webpack在哪里输出它所创建的bundles,以及如何命名这些文件. webpack.config.js

  module.exports = {
    entry:'./path/to/my/entry/file.js',
    output:{
      path:path.resolve(__dirname,'dist'),
      filename:'my-first-webpack.bundles.js'
    }
  }

loader

loader让webpack能够去处理非JavaScript文件.loader可以将所有类型的文件转换为webpack能够处理的有效模块,然后你就可以利用webpack的打包能力,对他们进行处理. 在更高层面,在webpack的配置中loader有两个目标:

test属性,用于标识出应该被对应的loader进行转换的某个或某些文件.
use属性,表示进行转换时,应该使用哪个loader. webpack.config.js

  const path = require('path');
  const config = {
    output:{
      filename:"my-first-webpack-bundles.js"
    },
    module:{
      rules:[
        {
          test:/\.txt$/,
          user:'raw-loader'
        }
      ]
    }
  }

  module.exports = config

plugin 插件

loader 被用于转换某些类型的模块,而插件则可以用于执行范围更广的任务.插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量.插件的功能极其强大,可以用来处理各种各样的任务. 想要使用一个插件,你只需要require()它,然后把它添加到plugin数组中.多数插件可以通过选项(option)自定义.你也可以在一个配置文件中因为不同目的而多次使用同一个插件,这时需要通过使用new 操作符来创建它的一个实例. webpack.config.js

  const HtmlWebpackPlugin = require('html-webpack-plugin')
  const webpack = require('webpack');

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

  module.exports = config

mode 模式

通过选择development或production之中的一个,来设置mode参数,你可以启用相应模式下的webpack内置的优化 webpack.config.js

  module.exports ={
    mode:"production"
  }

最后修改于 2022-05-30