webpack的基本使用

榕树下的蜗牛
98 阅读4分钟

一、安装

1、初始化项目

npm init -y

package.js

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "private":true, //私有项目，不会发布到npm仓库
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

2、安装webpack

cnpm i webpack webpack-cli -D
//指定版本安装
cnpm i webpack@5.23.0 -D

二、介绍

webpack的定义：

webpack 是一个用于现代 JavaScript 应用程序的_静态模块打包工具

三、配置文件

webpack.config.js

1、mode 模式

  • development 开发模式 代码不会被压缩
  • production 生产模式 代码会被压缩

2、entry 入口配置

3、output 输出配置

  • filename 输出的文件名
  • path 输出的路径
  • library 暴露全局对象名
  • libraryTarget 暴露库 (library)

4、module 模块

rules 规则

创建模块时，匹配请求的规则数组。这些规则能够修改模块的创建方式。 这些规则能够对模块(module)应用 loader，或者修改解析器(parser)

常用loader

loader的执行顺序是从下到上，从右到左。

file-loader //图片资源处理，字体处理。

url-loader //用于将文件转换为 base64 URI 的 loader, v5 后弃用：请考虑使用 asset modules 代替。

style-loader //把 CSS 插入到 DOM 中

css-loader //css-loader 会对 @import 和 url() 进行处理，就像 js 解析 import/require() 一样。

sass-loader //加载 Sass/SCSS 文件并将他们编译为 CSS

less-loader //webpack 将 Less 编译为 CSS 的 loader。

postcss-loader //使用 PostCSS 处理 CSS 的厂商前缀 loader

babel-loader //把ES6语法转换为ES5

imports-loader //改变this在模块中的指向

module

//babel-loader
module.exports = {
    module: {
        rules: [{
            test: /\.m?js$/,
            exclude: /(node_modules|bower_components)/,
            use: [{
                loader: 'babel-loader',
                options: {
                    presets: [
                        ['@babel/preset-env', { "useBuiltIns": "usage" }]
                    ]
                },{
		loader:'imports-loader?this=>window'
		}]
            }
        }]
    }
}

注意：loader 需要安装到开发依赖

5、Plugins 插件

webpack有丰富的插件接口。webpack本身的大多数特性都使用这个插件接口。这使得webpack变得灵活。

常用插件

Html-webpack-plugin //会在打包结束后，自动生成一个html文件，并把打包生成的js自动引入到这个html文件中。

clean-webpack-plugin //删除打包的文件夹

webpack.HotModuleReplacementPlugin //webpack自带的热部署插件

MiniCssExtractPlugin //CSS 提取到单独的文件中

CssMinimizerWebpackPlugin //使用 cssnano 优化和压缩 CSS

webpack.ProvidePlugin //webpack自带的Shimming预置全局变量插件
new webpack.ProvidePlugin({
      _: 'lodash',
      $: 'jquery'
}),

6、Devtool 映射源代码

此选项控制是否生成，以及如何生成 source map。 sourceMap是一个映射关系，映射了打包后的文件对应原文件

devtool: none //关闭生成map文件，提高打包效率
devtool: source-map //生成map文件，降低打包效率，可以定位错误文件源码
devtool: inline-source-map //同上，只是不会打包独立的map文件，会把映射关系打包到主文件js中。
devtool: cheap-source-map //cheap只定位行号，不定位列
devtool: cheap-module-source-map //module会定位第三方模块
devtool: eval //把代码通过eval的方式打包到文件中，但是在代码量大了后，提示不全。
//开发环境中推荐
devtool: cheap-module-eval-source-map 
//生产环境中推荐
devtool: cheap-module-source-map

7、DevServer 开发服务器

var path = require('path');

module.exports = {
  //...
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000,
  },
};

contentBase

告诉服务器内容的来源。仅在需要提供静态文件时才进行配置

compress

为每个静态文件开启 gzip compression

open

告诉 dev-server 在服务器启动后打开浏览器。 将其设置为 true 以打开默认浏览器

port

指定端口号以侦听以下请求

proxy

接口代理转发

hot

启用 webpack 的 Hot Module Replacement 功能,热部署。

hotOnly

启用热模块替换,而无需页面刷新作为构建失败时的回退.

historyApiFallback

当使用 HTML5 History API 时, 所有的 404 请求都会响应 index.html 的内容。 将 devServer.historyApiFallback 设为 true开启

8、Optimization 优化

从 webpack 4 开始，会根据你选择的 mode 来执行不同的优化， 不过所有的优化还是可以手动配置和重写。

usedExports

//在package.js中添加"sideEffects":["@babel/polly-fill"]
optimization: {
    usedExports: true,
},

splitChunks 代码分割

optimization: {
    splitChunks:{
    	chunks:'all'
    },
},

prefetch(预获取)：将来某些导航下可能需要的资源

这会生成 并追加到页面头部，指示着浏览器在闲置时间预取 login-modal-chunk.js 文件。

import(/* webpackPrefetch: true */ './path/to/LoginModal.js');

preload(预加载)：当前导航下可能需要资源

在页面中使用 ChartComponent 时，在请求 ChartComponent.js 的同时，还会通过 请求 charting-library-chunk。假定 page-chunk 体积很小，很快就被加载好，页面此时就会显示 LoadingIndicator(加载进度条) ，等到 charting-library-chunk 请求完成，LoadingIndicator 组件才消失。启动仅需要很少的加载时间，因为只进行单次往返，而不是两次往返。尤其是在高延迟环境下。

import(/* webpackPreload: true */ 'ChartingLibrary');

两者的不同之处

  • preload chunk 会在父 chunk 加载时，以并行方式开始加载。prefetch chunk 会在父 chunk 加载结束后开始加载。
  • preload chunk 具有中等优先级，并立即下载。prefetch chunk 在浏览器闲置时下载。
  • preload chunk 会在父 chunk 中立即请求，用于当下时刻。prefetch chunk 会用于未来的某个时刻。
  • 浏览器支持程度不同。

runtimeChunk

设置为 true 或 'multiple'，会为每个只含有 runtime 的入口添加一个额外 chunk。

9、performance 性能

hints

打开/关闭提示。此外，当找到提示时，告诉 webpack 抛出一个错误或警告。此属性默认设置为 "warning"。 给定一个创建后超过 250kb 的资源：

module.exports = {
  //...
  performance: {
    hints: false,
  },
};

10、externals 外部扩展

从输出的 bundle 中排除依赖」的方法。

module.exports = {
  //...
  externals: {
    jquery: 'jQuery',
  },
};

四、打包命令

 //默认配置文件打包 webpack.config.js
 npx webpack

 //指定配置文件打包
 npx webpack --config 配置文件名.js

 //监听打包文件
 npx webpack --watch

 //devServer服务器命令,此命令打包的结果没有打包后的文件
 npx webpack-dev-sever

五、第三方模块

webpack-merge

作用：合并模块 安装：npm install webpack-merge -D

const merge = require('webpack-merge')
const baseConfig = require('./webpack.base.js')
const devConfig = {}
module.exports = merge(baseConfig,devConfig)
avatar
文章
阅读
粉丝