五分钟弄懂webpack原理和常用方法

vlambda
2020-07-18

五分钟弄懂webpack原理和常用方法

一、webpack的作用和原理

webpack的基础能力：处理依赖、模块化、打包。

webpack的工作原理：进行代码分析，找到“require、exports”等关键词，并替换成对应模块的引用。

在一个配置文件中，指明对某些文件进行编译、压缩、组合等任务。将项目当成一个整体，通过指定的主文件index.js，webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包成一个浏览器可以识别的js文件。

二、webpack的核心概念

入口（entry）

单入口：module.exports = { entry: './path/to/my/entry/file.js'};或module.exports = { entry:{ main:'./path/to/my/entry/file.js' }};
多入口module.exports = { entry：{ main:'./path/to/my/entry/file.js', other:'./path/to/my/entry/file.js'  }}

出口（output）

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

loader

loader让webpack能够处理那些非JavaScript文件，将所有类型的文件转换成webpack能够处理的有效模块。

插件（plugins）

loader被用于转换某些类型的模块，而插件则可以执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。

使用插件只需要require它，然后添加到plugins数组中。多数插件可以通过选项（option）自定义。也可以在一个配置文件中因为不同目的而多次使用同一插件，这是需要通过使用new操作符来创建它的一个实例。

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装const webpack = require('webpack'); // 用于访问内置插件
const config = { module: { rules: [ { test: /\.txt$/, use: 'raw-loader' } ] }, plugins: [ new HtmlWebpackPlugin({template: './src/index.html'}) ]};

模式（mode）

用于指定当前的构建环境

module.exports = {  mode: 'production'  //development 或 production};

三、webpack的基础使用

`html-webpack-plugin`

作用：这个插件主要作用是打包后自动生成html页面。

安装：npm i html-webpack-plugin -D

const HtmlWebpackPlugin = require('html-webpack-plugin')plugins: [ new HtmlWebpackPlugin({ template: './src/index.html',//模板文件地址 filename: 'index.html',//指定打包后的文件名字          hash: true，//也可给其生成一个hash值      }), ],

es6转es5

安装：npm i babel-loader @babel/core @babel/preset-env -D

{ test: /\.js$/, use: { loader: 'babel-loader', options: { presets: [ '@babel/preset-env' ],
 } } },

cleanWebpackPlugin

作用：每次打包自动删除输出目录下的文件

安装：npm i clean-webpack-plugin -D

const { CleanWebpackPlugin } = require('clean-webpack-plugin')plugins:[      new CleanWebpackPlugin(),]

copyWebpackPlugin

安装：npm i copy-webpack-plugin -D

const CopyWebpackPlugin = require('copy-webpack-plugin')plugins:[ new CopyWebpackPlugin({ patterns: [{ from: path.join(__dirname, 'public'), to: 'dist' }], }),]

bannerPlugin

作用：代码头部添加版权申明

安装：webpack上的一个自带插件

const webpack = require('webpack')plugins:[ new webpack.BannerPlugin('core by codelee'),]

happypack

作用：多线程打包

安装： npm install --save-dev happypack

const Happypack = require('happypack')module:{ rules: [{ test: /\.css$/, use: 'happypack/loader?id=css' }]}plugins:[ new Happypack({ id: 'css', use: ['style-loader', 'css-loader'] })]

压缩css和js

作用：将上面输出的css文件做压缩处理

安装：npm i optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin -D

const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')const UglifyJsPlugin = require('uglifyjs-webpack-plugin') optimization: { minimizer: [ new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: true }), new OptimizeCSSAssetsPlugin({}) ] },

处理css

作用：安装两个loader即css-loader（处理css中的@important语法）、style-loader用于将css插入head标签

安装：npm i css-loader style-loader -D

 module: { rules: [ { test: /\.css$/, use: ['style-loader','css-loader'] },  ] }

热更新

作用：代码更新是页面只会更新该更新的地方而不是重新渲染整个页面，即重新刷新页面。热更新插件也是webpack上自带的

devServer: { hot: true, port: 3000, contentBase: './dist', open: true }, plugins:[ new webpack.HotModuleReplacementPlugin() ]

splitChunks

作用：代码分包

module.exports = { optimization: { splitChunks: { // 分割代码块，针对多入口 cacheGroups: { // 缓存组 common: { // 公共模块 minSize: 0, // 大于0k抽离 minChunks: 2, // 被引用多少次以上抽离抽离 chunks: 'initial' // 从什么地方开始, 从入口开始 } } } },}

这些看懂，webpack就算基本入门了。

vlambda博客
学习文章列表