在上一篇webpack学习笔记中,直接在命令行中使用npx webpack
对项目进行打包时所使用的配置都是默认的,入口文件默认是src
目录下的index.js
文件,输出文件默认是dist
文件夹下的main.js
,这两个分别对应webpack
中的Input
和Output
核心配置模块,而这些配置我们可以在webpack
配置文件webpack.config.js
中进行指定配置。
- 在项目根目录下创建
webpack.config.js
文件,并且配置入口文件为a.js
,出口文件为bundle.js
。其中a.js
内容:
const say = function() {
console.log('say')
}
say()
webpack.config.js
内容如下:
module.exports = {
entry: './src/a.js',
output: {
filename: 'bundle.js'
}
}
删除原来的dist
文件夹,在命令行中输入npx webpack
执行,可以看到dist
文件夹下的js
文件变成了bundle.js
:
- 可以指定输出文件的路径,
webpack
内容如下:
const path = require('path')
module.exports = {
entry: './src/a.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, './list')
}
}
打包后可以看到:
- 可以指定一个配置文件进行打包,上面执行
npx webpack
打包命令默认是根据webpack.config.js
配置文件打包的。可以再创建一个webpack.dev.config.js
配置文件,将打包模式设置为开发环境,并删除原有的list
目录:
const path = require('path')
module.exports = {
entry: './src/a.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, './list')
},
mode: 'development'
}
命令行输入npx webpack --config webpack.dev.config.js
执行,改变配置文件了,点开list
目录下的bundle.js
进行查看,可见开发环境下代码不会被压缩,内容比生产环境下冗杂:
- 命令
npx webpack --config webpack.dev.config.js
有点长,可以将该命令写入package.json
文件的script
对象中:
然后在命令行输入npm run dev
,同样可以执行打包,但是命令简短很多。之后如果有比较长的命令都可以写在这里,然后用npm run
+script
的属性名来执行对应的命令。
本篇笔记是看了B站up主“左耳击水兽”的讲解视频记录下来,感兴趣的同学可以直接看他视频哦。