Webpack打包

Webpack是 JS 静态打包神器,通过内部组件进行一系列操作,对前端代码进行替换、转义、JS浏览器兼容性等处理,最终生成前端应用所需文件包括 Html、JS和 CSS。Webpack主要以下几部分组成,这些配置都可以定义在webpack.config.js,loaders 和 plugins 需要npm install 进行安装。

  1. Entry:入口文件定义,通过入口文件最终生成应用的依赖关系,从而确定项目所需要打包的文件。
module.exports = {
  entry: './path/to/my/entry/file.js',
};

  1. Output:结果文件,根据从入口生成的依赖关系,最终打包成结果文件,这个文件最终会被引用到 html 文件中。
const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js',
  },
};
  1. Loaders:原生的webpack 只认识 JS 文件,如果想用其他格式的文件,就需要的通过 loader 文件进行转换,例如 vue、css 等。点击可以查看官方支持的 loader 列表:
const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js',
  },
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },};

4.Plugins:loaders 可以转换文件,plugins 比 loaders 更强大,通过Tapable类库,采用添加 hook的方式对 webpack 最终生成的代码进行增强, 例如 compile、run 阶段的 hook。查看官方支持的插件列表

const HtmlWebpackPlugin = require('html-webpack-plugin');const webpack = require('webpack'); //to access built-in plugins

module.exports = {
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};

5.Mode:支持 production、development,这样可以对不同的环境进行不同的打包处理,例如,在 development 时候不需要混淆 JS

module.exports = {
  mode: 'production',
};

6.Browser Compatibility: webpack默认支持版本高于 IE8 的浏览器,这个足够用了,现在 IE 已经淘汰了,出了特殊需要。生产环境不需要。

webpack 例子

这部分,我们做一个简单的webpack例子,主要看看 loaders,plugins都是怎么用的,首先创建有个 webpack 的项目:

mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

在 JS 中使用 css,需要通过 loader 将 css载入到我们应用当中,安装 Loader

npm install --save-dev style-loader css-loader

把对应入口文件和和 html 创建好

index.js
import './index.css';
function component() {
const element = document.createElement('div');
// Lodash, currently included via a script, is required for this line to work
element.innerHTML = 'hello';
element.classList.add('test');
return element;
}
document.body.appendChild(component());
index.html 文件放到 dist 目录下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>

index.css
.test{
width: 100px;
height: 100px;
margin: 10px;
background-color: aliceblue;
border-radius: 50%;
}

webpack.config.js
const path = require('path');

module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
],
},
};

命令行执行 npx webpack,通过浏览器查看结果:

添加 HtmlWebpackPlugin,这个插件的作用是自动生成 html 文件,首先安装plugins

npm install --save-dev html-webpack-plugin

修改配置文件,引入并添加配置插件

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
],
},
plugins: [new HtmlWebpackPlugin()],
};

执行 npx webpack,之前的 index.html 会被覆盖,这个插件主要的作用是如果输出文件名有变化例如添加 hash,这是就要去修改引入 JS。

Webpack 功能很多,都是通过 loader 和 plugin 的方式实现的,可以参考官方文档。

上一篇:2024-4-23 群讨论:Java堆空间OutOfMemoryError该怎么办


下一篇:JavaScript 如何实现一个响应式系统