Webpack核心概念

2022-02-23 12:30:19 阅读：246 来源： 互联网

标签：文件核心 webpack 入口 js 概念 Webpack loader 打包

文章目录

核心概念

核心概念

本文主要学习webpack入门的一些核心概念，包括webpack.config.js的entry，output，loaders，plugins，mode等，下面我们一个个来介绍

entry

entry是用来指定webpack的打包入口，Entry 属性指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。入口文件可以有多个。根据项目特点，可以以多种方式来配置 Entry。

webpack基本示意图

如图，我们只需要配置最开始的.js文件，后续webpack会将一切的资源，不管是js资源还是非代码的css，png，字体等等各种资源，当做不同的模块加入到左侧的依赖树（图左侧），所有资源遍历完成以后最终打包完成。

entry的两种用法

单入口

//打包入口文件(如果是单个入口就是字符串，如果是多个入口就需要配置成对象)
module.exports = {
    entry: './src/index.js',               
}

多入口（适合多页面场景）

//打包入口文件(如果是单个入口就是字符串，如果是多个入口就需要配置成对象)
module.exports = {
    entry: {
        app: './src/index.js',
        search: './src/search.js'
    },                
}

output

Output是用来告诉webpack如何将编译后的文件输出到磁盘

output两种用法

单入口配置

module.exports = {
    entry: './src/index.js',                //打包入口文件(如果是单个入口就是字符串，如果是多个入口就需要配置成对象)
    output: {                               //打包输出文件
        path: path.join(__dirname, 'dist'),
        filename: "bundle.js"
    },
}

多入口配置

module.exports = {
    entry: {
        app: './src/index.js',
        search: './src/search.js'
    },                //打包入口文件(如果是单个入口就是字符串，如果是多个入口就需要配置成对象)
    output: {                               //打包输出文件
        path: __dirname+'/dist',
        filename: '[name].js'  //通过占位符确保文件名的唯一性
    }
}

loaders

webpack默认配置下是支持支js和json两种文件类型（CSS，LESS都不支持），通过Loaders去支持其它文件类型，并且将他们转化成有效的模块，再添加到依赖树中。

本身是一个函数，接受源文件作为参数，并返回转换后的结果。

用法

module.exports = {
	......
  module: {
        rules: [{                  //Loader配置，test：指定匹配规则，use 指定使用loader的名称
            test: /\.test$/, use: 'raw-loader'
        }]
    },
    plugins: [new HtmlWebpackPlugin()]
}

目前常见的Loaders

babel-loader

装换ES6,ES7等等JS新的语法特性
css-loader

支持.css文件的加载和解析
less-loader

将less文件装换成css
ts-loader

将ts装换成js
file-loader

进行图片字体等打包
raw-loader

将文件以字符串的形式导入
thread-loader

多进程打包js和css

plugins

plugin 用于bundle文件优化，资源管理和环境变量的注入，作用于整个构建过程，用来增强webpack的功能，可以理解为任何Loaders没办法完成的事情可以通过plugin来完成。

常用的Plugins

CommonsChunkPlugin

将chunks相同的代码提取成公共的js
CleanWebpackPlugin

清理webpack构建目录
ExtractTextWebpackPlugin

将CSS从Bundle文件里抽取成一个独立的CSS文件
CopyWebpackPlugin

将文件或者文件夹拷贝到构建的输出目录
HtmlWebpackPlugin

创建HTML文件去承载输出的bundle
UglifyjsWebpackPlugin

压缩Js
ZipWebpackPlugin

打包出的资源生成一个zip包

mode

Mode是用来指定当前的构建环境是：production，development，还是none

设置node可以使用webpack内置的函数，默认值未production.

production

设置process.env.NODE_ENV值为production，开启FlagDependencyUsagePlugin，FlagIncludeChunksPlugin，ModuleConcatenationPlugin，NoEmitOnErrorsPlugin，OccurenceOrderPlugin，SideEffactsFlagPlugin和TerserPlugin。
development

设置process.env.NODE_ENV值为development，开启NamedChunksPlugin和NameModulesPlugin
none

不开启任何优化选项

标签：文件,核心,webpack,入口,js,概念,Webpack,loader,打包
来源： https://blog.csdn.net/huangbiao86/article/details/123087268

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9