webpack 从零开始（中

原创于 2022-09-13 01:39:16 发布 · 239 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #javascript #前端

webpack 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了webpack的配置，包括管理输出、开发环境设置、代码分离和缓存策略。通过实例演示了如何配置输出文件、使用devServer实现自动刷新、分离CSS和JS、以及利用hash实现文件缓存。

webpack 从零开始（中

简介： webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。
上文：webpack从零开始（上

四、管理输出

管理输出（output）的话，就得经常用到插件（plugin），咱们还是跟着官方的实例来走
index.js 改回原来的hello world,新建一个print.js

// import App from './App.vue'
// import { createApp } from 'vue'

// createApp(App)
// .mount("#app")
(function(){
  const el = document.createElement('div')
  el.innerHTML = 'Hello world!'

  document.body.appendChild(el)  
})()

这里我们用上一个HtmlWebpackPlugin 用来自动生成html 文件，当输出文件修改的时候就能够自动引用js文件

cnpm install --save-dev html-webpack-plugin

修改配置文件webpack.config.js

const HtmlWebpackPlugin  = require( 'html-webpack-plugin')
plugins: [
	new HtmlWebpackPlugin({
		title: 'Webpack Begin'
	})
]

npm run build ,检查一下index.html OK 生成了新的html文件

<!doctype html><html><head><meta charset="utf-8"><title>Webpack Begin</title><meta name="viewport" content="width=device-width,initial-scale=1"><script defer="defer" src="main.js"></script></head><body></body></html>

修改一下 output

output{
	filename: 'bundle.js',
	...
}

重新rebuild 生成了一个bundle.js 文件，index.html引用的是bundle.js
但是原来的main.js 文件还存在，占空间呐，所以要清除它，在output里写上配置

output: {
	...
	clean: true
}

重新 run build OK main.js 清除了

五、开发环境

先将mode 设置为 development

//webpack.config.js
plugins:[],
mode: 'development'

使用source map 追踪错误
我们把index.js

el.innerHTML = 'Hello world!'

改成

el.innerHtml = 'Hello world!'

run build 查看浏览器没有报错！！尴尬
把 document.body. 删掉body run build
查看报错

bundle.js:1 Uncaught DOMException: Failed to execute 'appendChild' on 'Node': Only one element on document allowed.

这一句报错的位置是 bundle.js 第一行
很显然不利于我们Debug 查找位置
添加devtool 配置

devtool: 'inline-sourec-map'

run build 查看浏览器报错位置为 index.js 第十行
找到index.js 第十行把 body 加上去run build ok debug 成功

emm
到现在为止我们已经 npm run build 太多次了所以能不能偷点懒呢
于是我们用上了 devserver 它会创建一个代理服务器
当我们修改代码时就会自动刷新浏览器，省得我们不停的rebuild

安装 webpack-dec-server,(webpack提供了三种方案这里就讲常用的devServer)

cnpm install --save-dev webpack-dev-server

配置文件添加 devServer 配置

devServer: {
	static: './dist'，//查找路径
	port: 8080, //服务端口
},
//这里先不管，跟代码分离相关
optitmization: {
	runtimeChunk: "single"
}

添加pakage.json配置

"scripts": {
"build"..
"serve": "webpack serve --open"
}

npm run serve 报了一个错
说bundle.js是重复的chunk
修改 output

output{
	name: "[name].js" //这样的话输出的文件名就是源文件名
}

npm run serve 自动打开浏器OK dev server 安装成功了

六、代码分离

我们之前安装了vue 但是所有的js文件都是被打包进 main.js 里面的，那么如何将css 文件和js文件分离呢？还有如何将vue不同的组件拆分开来？
我们先按文档走
1.通过多个起点分离不同的文件，这是最简单也是最直接的方式
在 src 下新建 another.js

import _ from 'lodash';

console.log(_.join(['Another', 'module', 'loaded!'], ' '));

这里用到了 lodash 这个库安装一下

cnpm install lodash --save

index.js 修改

// import App from './App.vue'
// import { createApp } from 'vue'
import _ from 'lodash'
// createApp(App)
// .mount("#app")
(function(){
  const el = document.createElement('div')
  el.innerHTML = 'Hello world!'

  document.body.appendChild(el)
  console.log(_.join(['Hello','World!']," "));  
})()

修改配置文件

entry: {
   index: './src/index.js',
   another: './src/another.js' 
 },
 output: {
   filename: "[name].bundle.js", // 这里
   path: path.resolve(__dirname,'dist'), //__dirname 指向项目根目录
   clean: true,
 },

因为这两个文件都引用了 lodash 这个库所以run build 时会发现打包的文件都很大，使用splitChunksPlugin 来进行代码分离
修改配置文件

optimization: {
	splitChunks:  {
	 	chunks: "all"
	}
}

lodash 库文件被提取出来单独打包了

分离css 文件
使用 mini-css-extract-plugin: 分离css文件，
安装：

cnpm install --save-dev  mini-css-extract-plugin

修改配置文件

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module: {
	rules: [{
		test: /\.css$/i,
      	use: [MiniCssExtractPlugin.loader,'css-loader']	
	}]
}
plugins: [
	 new MiniCssExtractPlugin()
]

index.js 引入 index.css

import 'index.css'

npm run build OK 生成了index.css文件

修改配置文件

{
      test: /\.scss$/i,
      use: [MiniCssExtractPlugin.loader,'css-loader','sass-loader']
 },

index.js 引入 scss 文件

import 'index.scss'

npm run build 查看浏览器，检查生成的index.css 发现文字变白了

七、缓存

此章重点在于通过必要的配置，以确保 webpack 编译生成的文件能够被客户端缓存，而在文件内容变化后，能够请求到新的文件。

管理输出的文件名
配置输出

output: {
	filename: '[name]。[contenthash].js'
}

run build 发现文件名带了一串hash值
再次 run build 发现文件名没有发生改变，所以文件就会被浏览器缓存

我们在使用devServer 的时候添加了这么一项配置

optimization: {
	runtimeChunk: 'single'
}

这句话解释了上面配置的意思：webpack 还提供了一个优化功能，可使用 optimization.runtimeChunk 选项将 runtime 代码拆分为一个单独的 chunk。将其设置为 single 来为所有 chunk 创建一个 runtime bundle

修改splitChunkPlugin配置缓存

splitChunks: {
       cacheGroups: {
         vendor: {
           test: /[\\/]node_modules[\\/]/,
           name: 'vendors',
           chunks: 'all',
         },
       },
     },

run build 发现第三方库的名字发生了改变

生成的hash 有点长,修改output

output: {
	filename: "[name].[contenthash:6].js"
}

同样生成的css 文件名也在插件里重新配置

new MiniCssExtractPlugin({
     filename: "[name].[contenthash:6].css"
   })

生成的hash 长度变成了6 看起来舒服许多

----本文完—
下一章 HMR 模块热替换