今天说说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。
总结:
webpack打包方式可分类以下三类:
- npx webpack index.js(要打包的文件) ---------- 具名打包
- npx webpack --------- 通过配置项直接打包
- npm run build ==> npm run webpack ---------- npm scripts配置打包指令方式