webpack入门认知

webpack 是什么?

本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle

主要概念,及作用,及使用方式?

主要概念:entry,output,loader,plugins

 

entry(输入):

entry: {[entryChunkName: string]: string|Array<string>}

指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。

const config = {
entry: {
  pageOne: './src/pageOne/index.js',
  pageTwo: './src/pageTwo/index.js',
  pageThree: './src/pageThree/index.js'
}
};

在entry中可以配置多个入口(多页面应用),使用CommonsChunkPlugin可以为每个页面间的应用程序共享代码创建bundle,多页应用能够复用入口起点之间的大量代码/模块。

 

output(输出):

配置 output 选项可以控制 webpack 如何向硬盘写入编译文件。注意,即使可以存在多个入口起点,但只指定一个输出配置。

output的属性是一个包含filename,path 的对象

filename :输出文件的文件名

path:目标输出目录的绝对路径

用多个入口起点或使用像 CommonsChunkPlugin 这样的插件),则应该使用来确保每个文件具有唯一的名称

{
entry: {
  app: './src/app.js',
  search: './src/search.js'
},
output: {
  filename: '[name].js', // 确保每个文件具有唯一的名称
  path: __dirname + '/dist'
}
}

 

loader

loader 用于对模块的源代码进行转换,更加灵活地引入细粒度逻辑,例如压缩、打包、语言翻译。。。

三种使用方式:

(推荐):在 webpack.config.js 文件中指定 loader。

:在每个 import 语句中显式指定 loader。

:在 shell 命令中指定它们。

module.exports = {
module: {
  rules: [
    { test: /\.css$/, use: 'css-loader' },
    { test: /\.ts$/, use: 'ts-loader' }
  ]
}
};

 

plugins(插件):

插件目的在于解决 loader 无法实现的其他事,webpack 插件是一个具有 属性的 JavaScript 对象。

插件可以携带参数/选项,你必须在 webpack 配置中,向 plugins 属性传入 new 实例

const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
plugins: [
  new HtmlWebpackPlugin({template: './src/index.html'})
]

 

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zyzfxp.html