webpack使用整理

最新推荐文章于 2024-06-04 22:19:33 发布

Mr Dore J先森

最新推荐文章于 2024-06-04 22:19:33 发布

阅读量328

点赞数

文章标签： webpack javascript

本文链接：https://blog.csdn.net/weixin_44892714/article/details/111871168

版权

##webpack 安装
1.-安装本地的 webpack(相对于全局)
2.-(yarn init -y)yarn add webpack webpack-cli -D
3.webpack-cli 是用来开启 node 服务的

##webpack 可以进行 0 配置

打包工具 -> 输出打包后的 js（js 模块）
:使用 npx webpack 命令
默认打包入口:默认情况下,要有 src 目录，及 src/index.js。
默认打包出口:dist/main.js
打包（支持 js 模块化）

##手动配置 webpack

默认配置文件 webpack.config.js
使用自定义的配置文件。在 webpack 打包命令后加上 --config 文件名
- 1.例如 npx webpack --config webpack.config.my.js
- 2.在 package.json 中配置,例如
```
 scripts:{
  "build":"webpack --config webpack.config.my.js"
  }
```

##使用 webpack-dev-server（不会生产真实的打包文件，打包文件只存在内存中）

1.安装。yarn add webpack-dev-server -D
2.使用 npx webpack-dev-server 启动;或者在配置 package.json 中配置脚本,

"scripts":{
  "dev":"webpack-dev-server"
  }

##HtmlWebpackPlugin 插件

1.安装。yarn add html-webpack-plugin -D

##loader:主要把源码进行转化

##抽离 css 样式的插件:yarn add mini-css-extract-plugin -D

##自动添加浏览器前缀（例如-webkit-transform 的形式）：

1.yarn add postcss-loader autoprefixer -D
2.添加 postcss.config.js 文件，

module.exports = {
  plugins: [require("autoprefixer")],
  };

3.package.json 配置

"browserslist": [
  "defaults",
  "not ie < 11",
  "last 2 versions",
  "> 1%",
  "iOS 7",
  "last 3 iOS versions"
  ]

##压缩 css 文件:yarn add css-minimizer-webpack-plugin -D

##压缩 js 文件：yarn add uglifyjs-webpack-plugin -D

##使用 babel 转化 es6 为 es5 代码:yarn add babel-loader @babel/core @babel/preset-env -D

##babel 转换 class 类属性定义与赋值:yarn add @babel/plugin-proposal-class-properties -D

##babel 转换装饰器语法:yarn add @babel/plugin-proposal-decorators -D

##处理 js 语法:
1.yarn add @babel/plugin-transform-runtime -D ;
2.yarn add @babel/runtime(需要注入进代码，不能加-D)

##转换 es7 的语法：yarn add @babel/polyfill(需要注入进代码，不能加-D)

##使用 ESLint 校验：yarn add eslint eslint-loader -D;然后可以在 ESLint 网站https://eslint.org/demo勾选配置项，下载.eslintrc.json文件到当前目录下（或者手动配置）

##loader 分类：
1.pre:前置，前面执行的 loader
2.normal:普通的 loader
3.inline:内联 loader (注意：inline 是在代码中注入的，不是在 webpack 中配置的)
4.post:后置 loader

loader 默认情况下都是 narmal 类型的

loader 执行顺序是：
1.同种类型下：从右向左，从上到下

module:{
      ...
      rules:[
        {
          test: /\.less$/,
          use: [MiniCssExtractPlugin.loader,'css-loader','postcss-loader','less-loader']
        },
      ]

}

2.不同类型的顺序：pre–>normal–>inline–>post
采用对象形式

module:{
  ...
  rules:[
    {
      test:/\.css/,
      use:[
        {
          loader: "postcss-loader",
           options: {
             enforce: "pre",
           },
        },
        "postcss-loader",
        {
          loader:MiniCssExtractPlugin.loader,
          options:{
            enforce: "post"
          }
        }
      ]
    }
  ]
}

##引入第三方模块（包）方式：
1 .expose-loader 暴漏到 window 上
使用 window.$访问

2 .new webpack.ProvidePlugin 给每个模块注入(node_modules 中需要有相关的包)(离线常用)

new webpack.ProvidePlugin({
$: "jquery",
})

可以直接在模块代码内访问$(即 jquery，不用导入)

3.引入不打包（CDN+externals 配置项。
注意：引入 cdn 的 script 标签要在 head 标签中引入，否则获取不到）（在线常用）
在模块内不要使用如 import 的导入,使用 cdn 引入的默认是全局变量，可以 window. $访问到，也可以直接$ 访问到

##webpack 打包图片 1.在 js 中创建图片来引入,new Image()
yarn add file-loader url-loader -D
file-loader:默认会在内部生成一张图片到 dist 目录下，并把生成的图片名字返回回来
url-loader:会做限制，当图片大小小于规定的大小时，图片用 base64 格式转换；当图片大小大于规定的大小时,使用 file-loader 加载真实图片
需要使用 import 引入图片
形如：

import photo from "./photo.jpeg"; //把图片引入。返回结果是新的图片地址
let image = new Image();
image.src = photo;
document.body.appendChild(image);

2.在 css 中引入，background('url)

3.使用<img src=‘url’>标签
yarn add html-withimg-loader -D
在 file-loader 或者 url-loader 下必须配置：

options: {
  esModule: false,
  outputPath: "img/",//图片输出的目录
}

##打包文件分类：例如，css 文件输出到 css 目录下，图片输出到 img 下。
形如:filename:
在 output 下要配置 publicPath 是所有打包文件的公共路径，打包后的文件会在给引用资源的时候统一在引用路径前加上 publicPath 的值
– 如果应用的资源放在 cdn 服务器上，则就配置 publicPath 为 cdn 的相关 url

output: {
publicPath: "./",
}.

1.new MiniCssExtractPlugin({
filename: "css/main.css", //抽离出的 css 文件名,输出到 css 目录下
}),
{
test: /\.(png|jpeg|jpg|gif)$/,

2.{
//当图片大小小于规定的大小时，图片用 base64 格式转换；当图片大小大于规定的大小时,使用 file-loader 加载真实图片
loader: "url-loader",
options: {
limit: 50 * 1024,
esModule: false,
outputPath: "img/", //file-loader 加载真实图片输出的目录
publicPath: "./",//配置公共路径（当前部分的公共路径）
},
}

##打包多页 1.多入口
形如：

entry: {
//多入口,多页
home: "./src/index.js",
other: "./src/index2.js",
},

2 .多出口
形如：

output: {
//多出口，多页
filename: "[name].[hash:5].js", //[name]代表 home 和 other，[]形式输出多个
path: path.resolve(\_\_dirname, "dist"),
},

3.new 两个 HtmlWebpachPlugin，生成两个 html 页面分别引入两个 js 文件

4.每个 HtmlWebpachPlugin 中配置不同的生成的 html 文件名称，配置 filename

5.每个 HtmlWebpachPlugin 中配置 html 中引入的 js 文件，配置 chunks，它是数组，可引入多个 js 文件,js 文件名称和 entry 定义的文件名对应

-形如：new HtmlWebpachPlugin({
//第一个页面
  template: "./src/index.html", //html 模板（默认就是'./src/index.html'）
  filename: "home.html", //(默认就是'index.html')
  minify: {
  removeAttributeQuotes: true, //删除双引号
  collapseWhitespace: true, //折叠空行
  },
  hash: true, //生成 hash
  chunks: ["home"], //要引入的 js 文件
}),
new HtmlWebpachPlugin({
//第二个页面
  template: "./src/index.html", //html 模板（默认就是'./src/index.html'）
  filename: "other.html", //(默认就是'index.html')
  minify: {
  removeAttributeQuotes: true, //删除双引号
  collapseWhitespace: true, //折叠空行
  },
  hash: true, //生成 hash
  chunks: ["other", "home"], //要引入的 js 文件
}),

6 - .页面之间跳转使用<a>标签

##增加映射文件,source-map，可以帮助调试
配置 devtool
1.source-map://增加映射文件，标识出错位置的列和行，大而全
2.eval-source-map://不会产生单独的文件，会标识出错位置的列和行
3.cheap-module-source-map://是一个单独的映射文件，不会标识出错位置的列//产生后可以保留起来
4.cheap-module-eval-source-map://不会产生文件，集成在打包后的文件中，不会标识出错位置的列
更多查看 webpack 文档

##watch 监控的选项，作用监控代码的修改，然后实时更新打包.watchOptions 可以配置每秒询问次数、防抖时间、不监控的文件。可以理解成 build 打包模式下的热更新打包。(可选)

##webpack 小插件
1 - .cleanWebpackPlugin 清除文件插件,如果需要得到每次打包之后最新的文件。（即打包之前先自动清除 dist 目录）使用这个插件
要安装：yarn add clean-webpack-plugin -D
使用:new CleanWebpackPlugin(), //每次 build 打包前清空 dist 文件

2 - .copyWebpackPlugin 拷贝插件 ,拷贝文件内容到 build 打包后的文件中
要安装：yarn add copy-webpack-plugin -D

##跨域代理在 devserver 下的 proxy 配置
方式一：通过跨域服务器

devServer:{
//方式一：通过跨域服务器
proxy:{//配置代理
'/api':{//匹配到/api
target:'http://localhost:3001',//转发到目标服务器
pathRewriet:{'/api':''}//重写'api/'为'',表示访问 http://localhost:3000/api/user,通过代理就是访问到 http://localhost:3001/user
}
}

方式二：使用 mock 模拟数据,使用 before 钩子方法

before(app){
app.get('./uesr',(req,res)=>{
res.json({name:'dj'})
})
}

方式三：有服务端，不想使用代理，在服务端启动 webpack,并采用服务端端口
需要使用 webpack-dev-middleware 中间件，node 服务通过 use 中间件转化后的 webpack 打包后的结果，在启动服务端的时候，也启动 webpack，具体内容可以查看 webpack 文档，搜索 webpack-dev-middleware

}

##resolves 属性的配置:（指和 entry 或 output 同级的 resolves 属性）
作用：解析，例如在使用了 import ‘lodash’,如何去查找第三方包(一般指 node_modules 中的第三方包)

resolves:{
  modules: ['node_modules'],//表示只从当前目录下查找，缩小查找范围。数组里可以多个目录，表示从多个目录下查找（这里表示只在 node_modules 下查找）

  alias:{//别名 例如：引入 vue,其实是引入 vue.runtime.js
    bootstrap:'bootstrap/dist/css/bootstrap.css',//表示在 import 'bootstrap'（默认是引入 js 后缀文件）时,其实是引入了 node_modules 下的 bootstrap/dist/css/bootstrap.css
  }

  mainFiles:['index'],//入口文件的名字，index.js

  mainFields:['style','main'],//主入口的字段，这里表示先查找第三包（例如：bootstrap）的 package.json 里的 style 字段代表的文件,在查找第三包（例如：bootstrap）的 package.json 里的 main 字段代表的文件。mainFields 进一步规定了第三方包内的查找范围和顺序.

  extensions:['.js','.css','json','.vue'],//扩展名，表示在例如 import 'myTest',省略文件后缀名时，查找时会按照 myTest.js,myTest.css,myTest.json,myTest.vue 的顺序去查找。extensions 规定了省略文件后缀名时查找的文件后缀名及顺序
}

##定义环境变量:
使用：new webpack.DefinePlugin({…}),具体内容可以查看 webpack 文档，搜索 DefinePlugin

##区分不同环境:
使用：yarn add webpack-merge -D
分别创建 webpack.dev.config.js 作为开发环境下配置，webpack.prod.config.js 作为生成环境下配置,webpack.base.config.js 作为公共的配置，具体内容自行搜索

##noParse:不去解析指定包的依赖项
在已知包没有依赖其他包的时候，使用 noParse 去指定，可以提高 webpack 打包的速度。(noPares 是 module 下的属性，和配置 loader 的 rules 同级)

##module 下 rules 在使用 loader 转换时的优化项：

exclude:/node_modules/，//表示在使用 loader 匹配转换代码时，不包含 node_modules 下的文件
include:path.resolve('src')，//表示在使用 loader 匹配转换代码时，包含 src 下的文件（对 src 下的文件进行匹配转换）

一般两者选用其一就可以了

##忽略引用：
new webpack.IgnorePlugin({resourceRegExp, contextRegExp}),手动引入需要的内容,忽略包内部用不到的引用,可以减小打包体积,具体内容自行搜索

##webpack 中的动态链接库：
由于每次重新打包，webpack 就会整个重新编译打包。但是，显然，修改的只有自己的代码，而引入的第三方库，例如使用了 react、jquery 等第三方库，它们是不会改变的。这些第三方库在每次也被重新编译打包了。此时，我们就要将这些不会改变的第三方包的内容抽离出去，统一打包成动态链接库，每次编译打包只针对自己的代码。这样可以有效提高打包的速度。
在 webpack 中实现 DLL 动态链接库，主要用到两个插件:webpack.DllReferencePlugin 和 webpack.DllPlugin

1.创建打包动态链接库的 webpack 配置文件.

module.exports = {
  entry: {
    react: ["react", "react-dom"],
    axios: "axios",
  },
  output: {
    filename: "_dll_[name].js", //产生的文件名为\*dll*axios.js 和\_dll_react.js
    path: path.resolve(__dirname, "dist/dll"),//生成 dll 文件放在 dist/dll 下
    library: "_dll_[name]", //_dll_react
  },
  plugins: [
    new webpack.DllPlugin({
    name: "_dll_[name]", //必须满足 name===library
    path: path.resolve(__dirname, "dist/dll/", "[name].manifest.json"),//生成 manifest.json（两个） 的文件，你可以理解为就是一张表，我们可以定义依赖
    }),
  ],
};

2.为了方便使用，可以在 package.json 中 script 配置相应的脚本

3.执行打包生成 dll 动态链接库

4.在 webpack 主配置文件 webpack.config.js 中配置插件

new webpack.DllReferencePlugin({
manifest: path.resolve(**dirname, "dist/dll/", "axios.manifest.json"),
}),
new webpack.DllReferencePlugin({
manifest: path.resolve(**dirname, "dist/dll/", "react.manifest.json"),
}),

5.在模板 index.hmtl 中引入动态 dll 库的资源

<script src="./dll/_dll_axios.js"></script>
<script src="./dll/_dll_react.js"></script>

或者使用 add-asset-html-webpack-plugin 插件插入动态 dll 库的资源

6.注意，在有 dll 动态链接库的情况下，不使用 CleanWebpackPlugin 清空 dist 目录，并且 output 的 filename 不使用 hash，直接覆盖的方式

##使用多线程打包:happyPack
注意：大项目可以提高打包速度，小项目可能打包速度反而变慢，因为开启多线程自身也消耗时间。

使用:yarn add happypack -D

1.匹配转换时，使用 Happypack/loader?id=js;id 对象着线程的 id
rules 中：

{
  test: /\.js$/, //normal 普通的 loader
  use: "Happypack/loader?id=js",
},

2.配置 Happypack 插件，id 对应上面的 id；use 配置真正转换的 loader 和配置项
plugins 中:

new Happypack({
  id: "js",
  use: [
    {
      loader: "babel-loader",
      options: {
        //用 babel-loader 需要把 ES5 转成 ES5(@babel/preset-env 就是用来转换 js 语法的)
        presets: [
          //预设
          "@babel/preset-env",
          "@babel/preset-react", //识别转换 react 的 jsx 语法
        ],
        plugins: [
          //配置小插件
          ["@babel/plugin-proposal-decorators", { legacy: true }], //支持装饰器语法
          ["@babel/plugin-proposal-class-properties", { loose: true }], //转化 class 属性定义和赋值
          "@babel/plugin-transform-runtime",
        ],
      },
    },
  ],
}),

##webpack 自带优化: 1.在使用 import 语法时，在生产环境打包时，会自动去掉没有用到的代码。这种机制就是 tree-shaking，会自动删除掉没有用到的代码。
注意:只在 import 语法下有用,如果使用 require，不支持 tree-shaking

2.scope hosting ,作用域提升（webpack3 才有）
例如：

let a=1;
let b=2;
let c=a+b; //在 webpack 中会自动地省略简化代码
console.log(c);

上面地代码，webpack 打包的结果其实不会声明 c 变量,类似于变成了

let a=1;
let b=2;
console.log(a+b);

##在多页应用或多 entry 时，抽离公共代码
主要配置 optimization 中的 splitChunks 属性

splitChunks: {//分割代码块
  minSize: 0, //只要达到 0 子节就抽离，（即使没有公用的 js, 也生成一个空的公用 js 文件.—）
  cacheGroups: {//缓存组
    common: {//公共的模块
      chunks: "all",
      minChunks: 2, //表示只要引用过 2 次及以上就抽离
    },
    vendor: {//抽离第三方包
      priority: 2, //表示抽离时的优先级，优先级越高，越先执行抽离
      test: /node_modules/, //匹配，表示引用的公共代码来自 node_modules 下的包
      chunks: "all",
      minChunks: 2, //表示只要引用过 2 次及以上就抽离
    },
  },
},

##懒加载（vue 路由懒加载，react 的懒加载都是这种方式实现的）

主要就是使代码中段支持异步导入代码
例如：
btn.οnclick=()=>{
import(‘test.js’).then(
data=>data.default
)
}

使用:yarn add @babel/plugin-syntax-dynamic-import -D

##热更新
页面不会重新加载，属于增量更新

devServer:{
  hot:true,//启用热更新
}

plugins 中:

  plugins:[
    ...
    new webpack.HotModuleReplacementPlugin()//热更新插件
  ]

配置热更新的代码块

import test from 'test'
if(module.hot){//如果当前模块支持热更新
  module.hot.accept(
    'test',
    ()=>{
      require('test')
    }
  )
}

##自定义 loader
webpack 只能处理 js 模块，如果要处理其他类型的文件，如.vue 文件，css 文件，less 文件，图片等,则需要使用 loader 进行转换。loader 是将一段带啊吗转换成另一段代码的 webpack 加载器。

1.一个 loader 其实就是一个函数，具有转换相应代码的功能
例如自定义一个 loader 叫 customLoader

//customLoader.js

function customLoader(source){//loader的参数就是源代码
  /...对源代码进行相应处理.../
  return source;
}
module.exports=customLoader;//注意:webpack是node应用,要使用node导出语法

这就是一个 loader 了，虽然看起来很简陋

2.如何在 webpack 中配置自定义的 loader 呢？

例如上面的 customLoader.js 放在根目录的 myLoaders 下

则 webpack 中配置:

方式一：

module:{
  rules:[
    {
      test:/\.js$/,
      use：path.resolve(__dirname,'myLoaders','customLoader.js')
    }
  ]
}

方式二：使用 resolveLoader 配置 alias，loader 别名

module.exports={
  resolveLoader:{//专门解析loader的
    alias:{//别名
      customLoader:path.resolve(__dirname,'myLoaders','customLoader.js')
    }
  },
  module:{
    rules:[
      {
        test:/\.js$/,
        use:'customLoader'
      }
    ]
  }
}

方式三:(推荐)使用 resolveLoader 配置 modules

module.exports={
  resolveLoader:{/
   modules:['node_modules',path.resolve(__dirname,'myLoaders')]
   //查找loader的模块。上面表示：先去node_modules目录下找，找不到再去myLoaders目录下查找
  },
  module:{
    rules:[
      {
        test:/\.js$/,
        use:'customLoader'
      }
    ]
  }
}

##查看 webpack 生命周期的信息
yarn add lifecycle-webpack-plugin -D

Mr Dore J先森

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack使用整理

##webpack 安装1.-安装本地的 webpack(相对于全局)2.-(yarn init -y)yarn add webpack webpack-cli -D3.webpack-cli 是用来开启 node 服务的##webpack 可以进行 0 配置打包工具 -> 输出打包后的 js（js 模块）:使用 npx webpack 命令默认打包入口:默认情况下,要有 src 目录，及 src/index.js。默认打包出口:dist/main.js打包（支持 js 模块化）
复制链接

扫一扫