npm run build与Webpack的关系！！！

小小前端拿捏

已于 2024-03-22 10:05:09 修改

阅读量2.2k

点赞数 26

文章标签： npm webpack 前端

于 2024-03-22 10:02:17 首次发布

本文链接：https://blog.csdn.net/weixin_50976410/article/details/136931551

版权

npm run build与Webpack的关系

Vue CLI 是一个由 Vue.js 官方提供的构建工具，它内置了 webpack。

当您使用 npm run build 时，实际上是在运行您项目中的构建脚本。这些脚本通常是在项目的 package.json 文件中定义的，它们可以执行各种任务，例如编译代码、打包资源、压缩文件等。在实际的开发中，这些任务可能由不同的工具和框架来执行，其中 webpack 是一个非常流行的选择之一。

下面是关于两种方法的区别和使用方法的简要说明：

使用 `npm run build`

定义构建脚本： 在项目的 package.json 文件中，您可以定义一个或多个构建脚本，这些脚本会通过命令行运行。例如：
```
"scripts": {
  "build": "webpack --config webpack.config.js"
}
```
执行构建： 通过运行 npm run build 命令，您将会执行在 build 脚本中定义的命令。这通常会调用 webpack 或其他构建工具来处理您的项目文件。

使用 webpack 直接

配置 webpack： 您可以创建一个 webpack.config.js 文件，其中包含了对 webpack 的配置。在配置文件中，您可以定义入口文件、输出文件、加载器、插件等。


const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
};

运行 webpack： 通过命令行运行 webpack，指定配置文件路径。
```
bashCopy code
webpack --config webpack.config.js
```

区别

npm run build：
- 依赖于项目的 package.json 文件中定义的构建脚本。
- 可以灵活地执行各种任务，不仅限于 webpack。
- 可以与其他构建工具和任务管理器结合使用。
直接使用 webpack：
- 需要手动创建 webpack 的配置文件。
- 对 webpack 的配置更加灵活，可以根据需求进行定制。
- 适用于更复杂的项目结构和构建需求。

使用建议

如果您的项目比较简单，不需要复杂的配置，可以直接使用 npm run build 来执行构建任务。
如果您的项目需要更加复杂的构建逻辑和定制化配置，可以选择直接使用 webpack，并编写自定义的 webpack 配置文件。

"build": "vue-cli-service build"我的项目中都是使用vue-cli打包的这个与 webpack有什么区别

在您的项目中，使用 vue-cli-service build 实际上是在运行 Vue CLI 提供的构建服务。Vue CLI 是一个由 Vue.js 官方提供的构建工具，它内置了 webpack，并且对 webpack 进行了封装和定制，以提供更简单、更便捷的 Vue 项目开发体验。

下面是使用 vue-cli-service build 与直接使用 webpack 的一些区别：

`vue-cli-service build`

基于 Vue CLI： vue-cli-service build 是基于 Vue CLI 的构建命令，它内置了对 Vue 项目的各种支持和配置。
预配置的 webpack： Vue CLI 预配置了 webpack，您无需手动创建 webpack 配置文件，可以直接使用默认的配置来构建项目。
封装的构建命令： vue-cli-service 提供了一系列的构建命令，包括 build、serve、lint 等，这些命令通过 Vue CLI 封装了对应的构建、开发、代码检查等任务。
默认的构建目标： Vue CLI 预配置了常见的构建目标，包括生产环境、测试环境等，默认的构建目标会根据不同的环境自动进行优化和配置。

直接使用 webpack

手动配置 webpack： 如果您直接使用 webpack，您需要手动创建 webpack 配置文件，并对 webpack 进行定制化配置。
更灵活的定制： 直接使用 webpack 可以更加灵活地定制 webpack 的配置，以满足项目的特定需求。
更多自定义选项： 直接使用 webpack 可以让您更加精细地控制项目的构建过程，包括加载器、插件、优化策略等。

使用建议

如果您的项目是基于 Vue.js，并且您对构建过程不需要过多的定制化，推荐使用 vue-cli-service build 进行项目构建。
如果您需要对 webpack 的配置进行更加精细的调整，或者您的项目不是基于 Vue.js，而是普通的 Web 项目，那么可以选择直接使用 webpack，并编写自定义的 webpack 配置文件

我自己的项目中也配置了自己的webpack 代码如下

const { defineConfig } = require('@vue/cli-service')
// 引入compression-webpack-plugin
const CompressionPlugin = require('compression-webpack-plugin');
//这个插件用于在构建过程中对静态资源进行压缩

module.exports = defineConfig({
  transpileDependencies: true,//这个配置指定了是否对依赖进行转译。通常用于处理 ES6+ 语法
  devServer: {
    port: 9090  //配置启动端口号
  },
  publicPath: "./",//这个配置指定了构建后的静态文件在服务器上的根路径。
  outputDir: "dist",//这个配置指定了构建后的输出目录为 dist
  assetsDir: "static",//这个配置指定了静态资源的存放目录为 static。
  indexPath: "index.html",//这个配置指定了生成的 index.html 文件的路径
  productionSourceMap: false,
 // 当前环境是vue.config.js 文件下的配置
//这个配置指定了是否在生产环境下生成 source map 文件，设置为 false 表示不生成。
 
 
  chainWebpack: (config) => {
 //这个配置用于自定义 webpack 配置。通过 chainWebpack 方法，可以获取到 webpack 配置对象 config，并且可以对其进行进一步的配置。
    config.plugin('compressionPlugin').use(new CompressionPlugin({ 
//这一行是对 webpack 的配置进行插件注入，具体是通过 config.plugin() 方法添加了一个名为 compressionPlugin 的插件，并使用 CompressionPlugin 插件对静态资源进行压缩。
      test: /\\.(js|css|less)$/, // 匹配文件名
      threshold: 1024, // 对超过10k的数据压缩
      deleteOriginalAssets: false, // 不删除源文件
      minRatio: 0.3, // 压缩比
    }))
  },

})