Webpack入门
admin 阅读： 2024-03-29
| 后台-插件-广告管理-内容页头部广告（手机） |
(创作不易，感谢有你，你的支持，就是我前行的最大动力，如果看完对你有帮助，请留下您的足迹）
目录
什么是 Webpack？
使用 Webpack
体验webpack打包过程
修改 Webpack 打包入口和出口
入口
出口
自动生成 html 文件
安装
基本用法
打包 css 代码
打包 less 代码
打包图片
什么是 Webpack？
定义：
静态模块：指的是编写代码过程中的，html，css，js，图片等固定内容的文件 打包 ：把静态模块内容，压缩，整合，转译等（前端工程化） 把 less / sass 转成 css 代码 把 ES6+ 降级成 ES5 支持多种模块标准语法
使用 Webpack
步骤： 1. 新建并初始化项目，编写业务 源代码 2. 下载 webpack webpack-cli 到当前项目中（版本独立），并 配置 局部自定义命令
3. 运行 打包 命令，自动产生 dist 分发文件夹（压缩和优化后，用于最终运行的代码）
体验webpack打包过程
第一步：初始化
第二步：编写代码
第三步： 下载 webpack webpack-cli 到当前项目中（版本独立），并配置局部自定义命令
第四步：运行打包命令，自动产生 dist 分发文件夹
修改 Webpack 打包入口和出口
入口
入口起点(entry point) 指示 webpack 应该使用哪个模块，来作为构建其内部 依赖图(dependency graph) 的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
默认值是 ./src/index.js，但你可以通过在 webpack configuration 中配置 entry 属性，来指定一个（或多个）不同的入口起点。例如：
- module.exports = {
- entry: './path/to/my/entry/file.js',
- };
出口
output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。
你可以通过在配置中指定一个 output 字段，来配置这些处理过程：
- 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',
- },
- };
自动生成 html 文件
安装
npm install --save-dev html-webpack-plugin基本用法
该插件将为你生成一个 HTML5 文件， 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle。 只需添加该插件到你的 webpack 配置中，如下所示：
- const HtmlWebpackPlugin = require('html-webpack-plugin');
- const path = require('path');
- module.exports = {
- entry: 'index.js',
- output: {
- path: path.resolve(__dirname, './dist'),
- filename: 'index_bundle.js',
- },
- plugins: [new HtmlWebpackPlugin()],
- };
这将会生成一个包含以下内容的 dist/index.html 文件：
- html>
- <html>
- <head>
- <meta charset="UTF-8" />
- <title>webpack Apptitle>
- head>
- <body>
- <script src="index_bundle.js">script>
- body>
- html>
如果你有多个 webpack 入口，他们都会在已生成 HTML 文件中的
| 后台-插件-广告管理-内容页尾部广告（手机） |
