我们前面讲的webpack打包命令webpack 待打包的文件 打包后的文件
是以参数的形式来指定打包的入口文件和出口文件,这种方式不够灵活。在项目中我们更常用的方法是:将打包的相关信息写在配置文件中。
webpack的配置文件为:webpack.config.js文件。
还是以前面的案例来进行讲解:
module.exports = {
entry: './src/main.js', //打包的入口文件,即需要打包的文件
output: {
//path为打包的出口文件目录,必须为绝对路径
path: 'C:\\Users\\Administrator.DESKTOP-7PKNCLF\\Documents\\HBuilderProjects\\test002\\test_webpack\\dist',
//filename为打包的出口文件名
filename: 'build.js'
}
}
在终端执行webpack打包命令:webpack
注意:如果你的webpack配置文件名不是webpack.config.js
,那么执行webpack
进行打包时,需要指定配置文件。
webpack xxx.js(配置文件)
因为我们的webpack配置文件中的出口目录路径需要为绝对路径,如果我们写死在配置文件中,可能导致该项目部署到不同的服务器时绝对路径不生效的问题。所以我们需要动态的获取配置文件中出口目录路径。
第一步:在项目中初始化npm。
因为我们动态获取路径需要使用npm中的内置模块path
,所以我们需要在项目中初始化npm。
# 进入项目路径执行以下命令
npm init
执行该命令时,需要我们确定很多选择项:
初始化npm后,会在项目目录下生成package.json文件,其内记录了项目相关的信息(就是我们初始化npm时的选择项)
第二步:在配置文件中动态获取出口文件路径
修改webpack.config.js文件如下:
let path = require('path') //导入path模块
module.exports = {
entry: './src/main.js',
output: {
// 动态获取路径。path.resolve()函数是将两个路径拼接在一起
// __dirname是获取当前文件的绝对路径
path: path.resolve(__dirname,'dist'),
filename: 'build.js'
}
}
我们在实际开发中往往并不会直接使用webpack命令进行打包,而是需要将webpack相关的打包命令映射为npm命令来进行管理。
在package.json文件中,映射webpack命令到npm为自定义命令。
{
"name": "test_webpack",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack" //将命令`webpack`映射为npm的自定义命令`build`
},
"author": "",
"license": "ISC"
}
然后执行命令:npm run build
本质就相当于执行webpack
。
安装方法:进入项目目录终端,执行命令npm install [email protected] --save-dev
在安装完成后,在项目package.json文件会生成以下信息
这样我们在执行npm run build
时,使用的就是项目局部的webpack了,而不是全局的webpack。