小言_互联网的博客

webpack 快速入门教程

2021-05-30 13:57 420人阅读  评论(0)

目录

1、了解 Webpack 相关

什么是 webpack

1. Webpack 是一个模块打包器 (bundler)。
2. 在 Webpack 看来, 前端的所有资源文件 (js/json/css/img/less/...) 都会作为模块处理。
3. 它将根据模块的依赖关系进行静态分析，生成对应的静态资源。

五大“护法”

  1. Entry：入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。
  2. Output：output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。
  3. Loader：loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只能解析 JavaScript）。
  4. Plugins：插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。
  5. Mode：模式，有生产模式 production 和 开发模式 development。

理解 Loader

  1. Webpack 本身只能加载 JS/JSON 模块，如果要加载其他类型的文件(模块)，就需要使用对应的 loader 进行转换/加载。
  2. Loader 本身也是运行在 node.js 环境中的 JavaScript 模块。
  3. 它本身是一个函数，接受源文件作为参数，返回转换的结果。
  4. loader 一般以 xxx-loader 的方式命名，xxx 代表了这个 loader 要做的转换功能，比如 json-loader。

理解 Plugins

  1. 插件可以完成一些 loader 不能完成的功能。
  2. 插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。

配置文件(默认)

webpack.config.js: 是一个 node 模块，内部暴露 webpack 配置对象。

2、准备工作

初始化项目：
1. 生成 package.json 文件。
2. 命令：npm init -y。
安装 webpack
npm install webpack webpack-cli -D

3、小试牛刀

  1. 创建 js 文件：
    1. src/index.js
    2. src/js/module1.js
    3. src/js/module2.js
    4. src/js/module3.js
  2. 创建 json 文件：src/json/data.json
  3. 创建主页面：public/index.html
  4. 运行指令：
    1. 开发配置指令：npx webpack ./src/index.js -o ./build/js --mode=development
      功能: webpack 能够编译打包 js 和 json 文件，并且能将 es6 的模块化语法转换成浏览器能识别的语法。
    2. 生产配置指令：npx webpack ./src/index.js -o ./build/js --mode=production
      功能: 在开发配置功能上加上一个压缩代码。
  5. 结论：
    1. webpack 能够编译打包 js 和 json 文件。
    2. 能将 es6 的模块化语法转换成浏览器能识别的语法。
    3. 能压缩代码。
  6. 缺点：
    1. 不能编译打包 css、img 等文件。
    2. 不能将 js 的 es6 基本语法转化为 es5 以下语法。
  7. 改善：使用 webpack 配置文件解决，自定义功能。

4、使用 webpack 配置文件

  1. 目的：在项目根目录定义配置文件，通过自定义配置文件，还原以上功能。
  2. 文件名称：webpack.config.js
  3. 文件内容：
const {
    resolve } = require("path"); // node内置核心模块，用来设置路径。

module.exports = {
   
  entry: "./src/index.js", // 入口文件
  output: {
   
    // 输出配置
    filename: "./js/main.js", // 输出文件名
    path: resolve(__dirname, "build"), // 输出文件路径配置
    clean: true, // 清除打包目录的文件
  },
  mode: "development", // 开发环境(二选一)
  // mode: 'production'   // 生产环境(二选一)
};
  1. 运行指令： npx webpack

5、js 语法检查

  1. 缘由：
    1. webpack 本身可以将 js 文件 ES6 语法编译成浏览器能识别的模块化语法。
    2. 但是开发时我们希望团队内部统一代码编程风格，不要你写你的样，我写我的样，这样看起来很难受。
    3. Eslint 工具就是用来做这个的，除此以外还能尽量规避一些开发时代码错误隐患。
  2. 安装 loader：npm install eslint-loader eslint -D
  3. 配置 loader：
module: {
   
  rules: [
    {
   
      test: /\.js$/, // 只检测js文件
      exclude: /node_modules/, // 排除node_modules文件夹
      enforce: "pre", // 提前加载使用
      use: {
   
        // 使用eslint-loader解析
        loader: "eslint-loader",
      },
    },
  ],
},
  1. eslint 要想工作，必须定义配置文件，配置文件有两种写法：
    1. .eslintrc.*
    2. package.json 文件中 eslintConfig
  2. 我们以第一种为例，项目根目录新建.eslintrc.js
module.exports = {
   
  // eslint配置
  parserOptions: {
   
    ecmaVersion: 8, // es8
    sourceType: "module", //  ECMAScript 模块
  },
  rules: {
   
    // error 和 2 代表错误
    // warn 和 1 代表警告
    // off 和 0 代表关闭
    semi: "error", // 分号
    "no-debugger": "warn",
    eqeqeq: "off", // 必须使用三个等号
  },
};
  1. 运行指令：npx webpack

6、js 语法转换

  1. 缘由：webpack 只能编译 ES6 模块化语法，其他语法不编译，所以要借助 babel 帮我们编译，否则自己手动改太费劲了。
  2. 安装 loader：- - npm install babel-loader @babel/core @babel/preset-env -D
  3. 配置 loader：
module: {
   
  rules: [
    // 省略之前配置
    ...,
    {
   
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
   
        loader: "babel-loader",
        options: {
   
          presets: ["@babel/preset-env"],
        },
      },
    }
  ],
},
  1. 问题：
    1. 此时我们的模块已经被 babel 处理了，由 ES6 语法变成 ES5 或 ES5 以下语法了。
    2. 但是 webpack 生成的函数还是箭头函数，导致 IE 运行不了。
  2. 解决：
    1. 在 package.json 中添加配置。
    2. 意思是：1. 覆盖 99%主流浏览器。 2. 只要最近两个版本。 3. 不要已经死了的(欧朋移动版)。
    3. 这个配置会指示 webpack 打包的内容以什么样的浏览器去兼容。
"browserslist": [
  "> 1%",
  "last 2 versions"
]
  1. 运行指令：npx webpack

7、打包 less 资源

  1. 创建 less 文件：
    1. src/less/test1.less
    2. src/less/test2.less
  2. 入口 index.js 文件：引入 less 资源
  3. 安装 loader：npm install css-loader style-loader less-loader less -D
  4. 配置 loader：
module: {
   
  rules: [
    // 省略之前配置
    ...,
    {
   
      test: /\.less$/,
      use: ["style-loader", "css-loader", "less-loader"]
    }
  ],
},
  1. index.html 中创建相应的 DOM 结构。
  2. 运行指令：npx webpack

8、打包样式文件中的图片资源

  1. 添加 2 张图片：
    小图, 小于 8kb: src/images/1.png
    大图, 大于 8kb: src/images/2.jpg
  2. 在 less 文件中通过背景图的方式引入图片。
  3. webpack 自带处理图片等资源的方式。
  4. 配置 loader：
{
   
  test: /\.(png|jpe?g|gif|svg)$/,
  type: "asset",
  parser: {
   
    dataUrlCondition: {
   
      maxSize: 8 * 1024, // 小于8kb以下的图片会被打包成base64格式
    },
  },
}
  1. 让图片输出到指定目录：
output: {
   
  assetModuleFilename: "images/[hash:8][ext][query]",
}
  1. 运行指令：npx webpack

9、打包其他资源

  1. 添加字体文件：
    1. src/fonts/iconfont.eot
    2. src/fonts/iconfont.svg
    3. src/fonts/iconfont.ttf
    4. src/fonts/iconfont.woff
    5. src/fonts/iconfont.woff2
  2. 修改 css，字体文件图片路径：
@font-face {
   
  font-family: "iconfont";
  src: url("../fonts/iconfont.eot");
  src: url("../fonts/iconfont.eot?#iefix") format("embedded-opentype"), url("../fonts/iconfont.woff2")
      format("woff2"), url("../fonts/iconfont.woff") format("woff"), url("../fonts/iconfont.ttf")
      format("truetype"), url("../fonts/iconfont.svg#iconfont") format("svg");
}

.iconfont {
   
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
  1. 修改 html，添加字体图标。
  2. 配置 loader：
{
   
  test: [/\.ttf$/, /\.woff$/, /\.woff2$/],
  type: 'asset/resource',
},
{
   
  test: /\.css$/,
  use: ['style-loader', 'css-loader']
},
  1. 运行指令：npx webpack

10、打包 html 文件

  1. 添加 html 文件：
    1. src/index.html
    2. 注意不要在 html 中引入任何 js 文件
  2. 安装插件 Plugins：npm install html-webpack-plugin -D
  3. 在 webpack.config.js 中引入插件（插件都需要手动引入，而 loader 会自动加载）：
    const HtmlWebpackPlugin = require('html-webpack-plugin')
  4. 配置插件 Plugins：
plugins: [
  new HtmlWebpackPlugin({
   
    template: "./public/index.html",
  }),
],
  1. 运行指令：npx webpack

11、自动编译打包运行

  1. 安装：npm install webpack-dev-server -D
  2. 修改 webpack 配置对象（注意不是 loader 中）：
devServer: {
   
  contentBase: './build',  // 打包根路径
  port: 8080, // 端口号
  open: true  // 自动打开浏览器
  progress: true, // 进度条
},
  1. 运行指令：npx webpack serve
  2. 简化指令：
    1. 修改 package.json 中 scripts 指令：
      1. “start”: “npm run dev”,
      2. “dev”: “webpack serve”
    2. 运行指令：npm start / npm run dev
  3. 问题：
    1. 此时并没有自动刷新浏览器功能。
    2. 原因：https://github.com/webpack/webpack-dev-server/issues/2758。
    3. 简单概括，这是一个 webpack BUG，自动刷新浏览器功能和 browserslist 不能同时存在。
  4. 解决办法：
    1. 添加配置：target: ‘web’。
    2. 问题：那 webpack 等工具打包的代码就有兼容性问题。
    3. 后面解决。

以上就是 webpack 开发环境的配置，可以在内存中自动打包所有类型文件并有自动编译运行等功能。

12、准备生产环境

  1. 创建文件夹 config，将 webpack.config.js 复制两份：
    1. webpack.dev.js
    2. webpack.prod.js
  2. 修改 webpack.prod.js 配置，删除 devServer 配置：
module.exports = {
   
  output: {
   
    filename: "js/[name].[contenthash:8].js", // 添加了hash值, 实现静态资源的长期缓存
    path: resolve(__dirname, "../build"),
    publicPath: "/", // 所有输出资源公共路径
  },
  mode: "production", // 修改为生产环境
  target: "browserslist", // 让webpack兼容生效，但是devServer会失效，但是生产环境不需要devServer
};
  1. 修改 package.json 的指令：
    1. “start”: “npm run dev”
    2. “dev”: “webpack serve --config ./config/webpack.dev.js”
    3. “build”: “webpack --config ./config/webpack.prod.js”
  2. 开发环境指令：
    1. npm start
    2. npm run dev
  3. 生产环境指令：
    1. npm run build
    2. 注意: 生产环境代码需要部署到服务器上才能运行：
      1. npm i serve -g
      2. serve -s build

13、提取 css 成单独文件

  1. 安装插件：npm install mini-css-extract-plugin -D
  2. 引入插件：const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  3. 配置 loader：
// 将 style-loader 提换成 MiniCssExtractPlugin.loader
{
   
  test: /\.less$/,
  use: [
    MiniCssExtractPlugin.loader,
    'css-loader',
    'less-loader',
  ]
}
  1. 配置插件：
new MiniCssExtractPlugin({
   
  filename: "css/[name].[contenthash:8].css",
  chunkFilename: "css/[id].[contenthash:8].css",
}),
  1. 运行指令：
    1. npm run build
    2. serve -s dist

14、添加 css 兼容

  1. 安装 loader：npm install postcss-loader autoprefixer -D
  2. 配置 loader：
{
   
  test: /\.less$/,
  use: [
    MiniCssExtractPlugin.loader,
    'css-loader',
    'postcss-loader',
    'less-loader',
  ]
}
  1. 在项目根目录添加 postcss 配置文件：.postcssrc.js
module.exports = {
   
  plugins: {
   
    autoprefixer: {
   },
  },
};
  1. 运行指令：
    1. npm run build
    2. serve -s build

15、压缩 css

  1. 安装插件：npm install optimize-css-assets-webpack-plugin -D
  2. 引入插件：
    const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
  3. 配置插件：
    new OptimizeCssAssetsPlugin({}),
  4. 运行指令：
    1. npm run build
    2. serve -s build

16、压缩 html

  1. 已经自动实现了
  2. 运行指令：
    1. npm run build
    2. serve -s build

以上就是 webpack 生产环境的配置，可以生成打包后的文件。

17、高频面试题

点我查看：前端高频面试题链接

此链接为 CSDN 内部链接，我收集整理的一些经常会问到的前端面试题，希望能对您所有帮助！


转载：https://blog.csdn.net/weixin_47021982/article/details/117198067
查看评论
* 以上用户言论只代表其个人观点，不代表本网站的观点或立场