webpack知识点

mythone
1,076 阅读3分钟

hash与chunkhash

hash:

  1. hash是跟整个项目的构建相关，构建生成的文件hash值都是一样的，所以hash计算是跟整个项目的构建相关，同一次构建过程中生成的hash都是一样的，只要项目里有文件更改，整个项目构建的hash值都会更改。

  2. 如果出口是hash，那么一旦针对项目中任何一个文件的修改，都会构建整个项目，重新获取hash值，缓存的目的将失效。

chunkhash:

  1. 采用hash计算的话，每一次构建后生成的hash值都不一样，即使文件内容压根没有改变。这样子是没办法实现缓存效果，我们需要另一种hash值计算方法，即chunkhash。

  2. chunkhash和hash不一样，它根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk，生成对应的hash值。我们在生产环境里把一些公共库和程序入口文件区分开，单独打包构建，接着我们采用chunkhash的方式生成hash值，那么只要我们不改动公共库的代码，就可以保证其hash值不会受影响。

  3. 由于采用chunkhash，所以项目主入口文件main.js及其对应的依赖文件main.css由于被打包在同一个模块，所以共用相同的chunkhash，但是公共库由于是不同的模块，所以有单独的chunkhash。这样子就保证了在线上构建时只要文件内容没有更改就不会重复构建

webpack.ProvidePlugin

webpack配置ProvidePlugin后，在使用时将不再需要import和require进行引入，直接使用即可

alias: {
  jquery: resolve('node_modules/jquery/dist/jquery.min.js')
}
new Webpack.ProvidePlugin({
  '$': 'jquery'
})

ProgressBarPlugin

new ProgressBarPlugin({
  format: `build [:bar] ${chalk.green.bold(':percent')} (:elapsed seconds)`,
  clear: false,
  width: 60
})

htmlWebpackExternalsPlugin

new htmlWebpackExternalsPlugin({
  externals:[
    {
      module: 'jquery',
      entry: 'https://unpkg.com/jquery@3.2.1/dist/jquery.min.js',
      global: 'jQuery'
    }
  ]
}),

Webpack.DefinePlugin

若不死字符串则会转成字符串，要是字符串则是字符串执行后的值

new Webpack.DefinePlugin({
  a: JSON.stringify(true),
  b: '1',
  c: '1+2',
  d: {
    e: JSON.stringify('xx')
  }
})

extension

指定extension之后可以不用在require或是import的时候加文件扩展名,会依次尝试添加扩展名进行匹配

alias

配置别名可以加快webpack查找模块的速度

多入口

const glob = require('glob')
const entryFile = glob.sync('./src/*.js')
const path = require('path')
const HtmlWebpackPlugin=require('html-webpack-plugin');

const entry = {}
const htmlWebpackPlugins = []
entryFile.forEach(file => {
  const filename = path.basename(file.split('/').pop(), '.js')
  entry[filename] = file
  htmlWebpackPlugins.push(
    new HtmlWebpackPlugin({
      template: `./src/${filename}.html`,
      filename: `${filename}.html`,
      chinks: [filename]
    })
  )
})
module.exports = {
  mode: 'development',
  entry,
  output: {
    filename: '[name].[hash:8].js',      // 打包后的文件名称
    path: path.resolve(__dirname,'dist'),  // 打包后的目录
    publicPath: '/'
  },
  plugins: [
    ...htmlWebpackPlugins
  ]
}

libraryTarget 和 library

output.library 配置导出库的名称
output.libraryExport 配置要导出的模块中哪些子模块需要被导出。 它只有在 output.libraryTarget 被设置成 commonjs 或者 commonjs2 时使用才有意义
output.libraryTarget 配置以何种方式导出库,是字符串的枚举类型，支持以下配置
var: 只能以script标签的形式引入我们的库
commonjs: 只能按照commonjs的规范引入我们的库
amd: 只能按amd规范引入	
umd: 可以用script、commonjs、amd引入

对webpack插件理解

webpack插件其实就是类似与vue钩子函数，在特定的时间执行某个回调

*/

** 代表文件夹，*代表任一文件

avatar
文章
阅读
粉丝