webpack 打包方式 (学习篇3)

最新推荐文章于 2024-05-22 12:05:26 发布

-小橙子-

最新推荐文章于 2024-05-22 12:05:26 发布

阅读量266

点赞数 1

分类专栏： Webpack 文章标签： webpack打包方式--配置文件

本文链接：https://blog.csdn.net/Riona_cheng/article/details/100114420

版权

Webpack 专栏收录该内容

19 篇文章 2 订阅

订阅专栏

今天说说webpack的打包方式具体有哪些？（以下情况全是在项目目录下执行的）

通过npx webpack index.js 打包

在没有给webpack做具体配置的情况下，我们可以通过npx webpack index.js(要打包的文件名) 来打包指定的文件。那么如果大家想通过自己配置的webpack配置文件进行打包，就需要花点小 ?思啦~

通过配置文件执行打包

举个?：
我们新建一个demo,项目目录如下：

其中，webpack.config.js为我们的webpack配置文件。
webpack.config.js文件具体配置项如下：

// 在这里做打包配置
const path = require('path'); // 引入node的path模块（loader模块）
// Common.js语法
module.exports = {
  mode: 'development',
  entry: {
    main: './src/index.js'
  },
  output: {
    filename: 'bundle.js', // 打包之后的输出文件
    path: path.resolve(__dirname, 'dist') // 指打包的文件放到哪个文件夹下
  }
}

配置项代表的含义：

mode : 打包的模式，有两个值（development和production），默认值为production, 可不写，但不写时打包命令运行时会有警告。主要区别在于：development模式打包之后的代码没有进行压缩，而production模式下，打包之后的代码会进行代码压缩。
entry : 配置入口文件，入口文件对应的键名为main。可直接简写为–> entry: ‘./src/index.js’.
output : 配置打包之后输出的文件，filename属性指打包之后的输出文件，path指打包文件所在文件夹的路径，这里要写绝对路径。node中的__dirname这个变量代表的就是webpack.config.js所在的文件路径（绝对路径）。

总的来说以上配置的含义就是：webpack从index.js打包, 打包后的文件放到build文件夹下，代码在build文件夹下的bundle.js文件里。配置好之后，我们就可以使用npx webpack直接进行打包了。

注：

这里的path也可以省略不写，不写的情况下，默认打包生成的绝对路径也是工程目录下的dist目录。
webpack默认的配置文件的名称为webpack.config.js, 一旦修改此名字，则当再次运行npx webpack时，会找不到配置项，而报错。如果想要修改配置文件的名字（比如把webpack.config.js修改为config.js），可通过npx webpack --config config.js来执行打包命令。

通过npm run build打包

还有一种打包方式，就是我们项目中通常用的npm run build命令打包，这个需要使用npm scripts进行配置，具体配置如下：
package.json文件

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.39.2",
    "webpack-cli": "^3.3.7"
  }
}

在scripts对象里添加"build"属性，属性值为"webpack"。当在终端执行npm run build命令打包时，实际上就是在运行package.json 中的webpack命令。
注：这里大家可能会产生误解，上篇文章（webpack定义–安装）中不是说了使用npm进行打包的时候会在全局查找webpack嘛。这里是特例，在scripts配置下，命令执行时并不会去全局找webpack, 实际上会先到工程目录下的node_module里边查找是否安装了webpack, 如果存在，就会直接使用。原理类似于node 中的npx。