学习笔记12（webpack入门）

最新推荐文章于 2022-07-07 15:56:25 发布

weixin_41837346

最新推荐文章于 2022-07-07 15:56:25 发布

阅读量514

点赞数

分类专栏：前端工程化文章标签： webpack

本文链接：https://blog.csdn.net/weixin_41837346/article/details/110070602

版权

前端工程化专栏收录该内容

13 篇文章 0 订阅

订阅专栏

webpack 基础用法

npm 包地址：https://www.npmjs.com/

初始化 package.json

npm init -y

安装webpack 和 webpack-cli

npm i -D webpack webpack-cli

webpack位置及其运行

./node_modules/.bin/webpack

通过 npm script 运行 webpack

// package.json
{
  //...
  "scripts": {
    "build": "webpack"
  },
}
// 命令行
npm run build

entry 指定打包入口，依赖图的入口是entry

单入口/多入口

output 告诉 webpack 如何将编译后的文件输入到磁盘

mode 指定打包模式，不同模式使用不同的 plugins

procuction , build默认
development
none

const path = require('path')

// build默认配置
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'main.js'
  },
  mode: 'production' 
}

dist目录下，生成打包后js文件main.js，index.html引入后，使用浏览器查看

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="main.js"></script>
</head>
<body>
</body>
</html>

loaders

webpack 开箱即用只支持 js 和 json 文件，通过loaders 去支持其他文件类型并把他们转化为有效的模块，添加到依赖图中
本身是个函数，接受源文件作为参数，返回转换的结果
module.rules 中，test 检测文件，use 使用 loader

babel-loader

解析es6(降级实现)，jsx…
安装依赖

npm i -D @babel/core @babel/preset-env babel-loader

配置 babelrc 及测试

//.babelrc
{
  "presets": [
    "@babel/preset-env"
  ]
}
// 配置
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader'
      }
    ]
  }
}
// index.js
class Demo{
  constructor(){
    this.a = 1
  }
}

document.write(new Demo().a)
// 打包后（es5实现）
document.write((new function n() {
    !function(n, t) {
        if (!(n instanceof t))
            throw new TypeError("Cannot call a class as a function")
    }(this, n),
    this.a = 1
}
).a);

解析 React JSX

// 安装依赖
npm i -D @babel/preset-react
npm i react react-dom
// babelrc
{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}
// index.js
import React from 'react';
import ReactDOM from 'react-dom';

class Search extends React.Component {
    render() {
        return <div className="search-text">
            搜索文字的内容
        </div>;
    }
}

ReactDOM.render(
    <Search />,
    document.getElementById('root')
);

less-loader…

style-loader 导入 css 到 DOM，css-loader 解析 css , less-loader 解析 less
use loader时，从右向左解析，解析结果传给下一个loader

// 安装
npm i -D css-loader style-loader less less-loader
// 配置
'use strict';
const path = require('path')

module.exports = {
  module: {
      { // 解析css
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      { // 解析less
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      }
    ]
  }
}
// 使用less
// index.js
import './index.less'
// index.less
.search-text{
  h1{
    color: red;
  }
}

解析图片和字体：file-loader, url-loader

file-loader、url-loader 用于处理文件, url-loader可以设置较小资源自动base64，其内部使用 file-loader

// module.rules
{
  test: /\.(png|jpg|gif|jpeg)$/,
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 102400
      }
    }
  ]
}

插件 plugins

插件用于 bundle 文件的优化、资源管理和环境变量注入
作用于整个构建过程

html-webpack-plugin

自动创建 html，用于 bundles

// 配置
const HtmlWebpackPlugin = require('html-webpack-plugin')

plugins: [
  new HtmlWebpackPlugin({
    template: './src/index.html' 
  })
]
// src/index.html
<!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>
  <div id="root"></div>
</body>
</html>

webpack中的文件监听

源码变化时，自动构建输出
设置方法

–watch
配置 watch: true

原理：轮询判断文件的最后编辑时间是否变化
修改策略：缓存变化，等待aggregateTimeout，批量修改
缺点：需要手动刷新浏览器

// package.json
{
  "scripts": {
    "watch": "webpack --watch"
  },
}
// 配置
watch: true,
watchOptions: {
  aggregateTimeout: 5000, // 默认300
}

热更新 webpack-dev-server(WDS)

WDS 使用热重载（ live reloading ），文件改变时刷新页面
配置hot: true 开启热更新（Hot Module Replacement），刷新时保证状态
WDS 在内存中运行，提升编译速度（减少文件IO）

// 安装
npm install --save-dev webpack-dev-server
// webpack.config.js
{
  devServer: {
    hot: true // 默认
  },
}
// package.json
"scripts": {
  "dev": "webpack serve --config webpack.dev.config.js --open 'Google Chrome'"
},

文件指纹策略

chunk: https://juejin.cn/post/6844903889393680392
bundle: 输出的打包文件
Hash: 和整个项目构建相关

chunkhash：和 webpack 打包的 chunk 相关，和 HMD 不兼容，只能在生成环境使用

output: {
  path: path.join(__dirname, 'dist'),
  filename: '[name]_[chunkhash:8].js'
},

Contenthash：和文件内容相关

MiniCssExtractPlugin 用于提取css到单独文件，使用 contenthash 命名文件。
style-loader 用于生成行内样式，使用 MiniCssExtractPlugin.loader 生成css文件

module: {
  rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      },
  ]
},
plugins: [
  new MiniCssExtractPlugin({
    filename: '[name]_[contenthash:8].css'
  }),
]

图片文件指纹

设置 file-loader 的name，使用 hash(文件内容hash, md5 生成)

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'img/[name]_[hash:8].[ext]'
            }
          }
        ]
      }
    ]
  }
}

代码压缩

js文件压缩

内置了 uglifyjs-webpack-plugin

css文件压缩

使用 optimize-css-assets-webpack-plugin，同时使用 cssnano处理器

new OptimizeCSSAssetsPlugin({
      assetNameRegExp: /\.css$/g,
      cssProcessor: require('cssnano')
    }),

html文件压缩

html-webpack-plugin

测试代码

https://github.com/baixc1/csdn/tree/master/note/note12

weixin_41837346

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录