我可以指定webpack的配置文件,通过--config
webpack
默认入口entry: src/index.js
,出口为:dist/main.js
默认配置文件为:webpack.config.js
如果需要指定其他配置文件,可以使用--config
例如:
在webpack5
文件夹根目录创建一个名为:webpack.dev.js
,将webpack.config.js
中的内容剪贴到它中。
此时webpack.config.js
中已经没有内容,这时候执行npm run build
会直接报错。
我们修改package.json
中scripts
属性的值为:
"scripts": {
"build": "webpack --config ./webpack.dev.js"
}
再执行npm run build
发现可以构建成功,则我们就将默认的配置文件改为了webpack.dev.js
这在日后我们需要不同环境构建不同内容时候,通过命令可以轻松构控制配置文件的使用起到关键性作用。
好了,上面内容过于简单,就不使用webpack-cli
来创建了,有兴趣的小伙伴可以自行搜索
我可以指定webpack的需要工作的根目录
webpack.config.js中内容如下:
module.exports = {
context: path.resolve(__dirname, 'src'), //
entry: './src/index.js',
}
这context是干啥的啊?
执行以下npm run build
,发现报错了。看报错信息为:
Module not found: Error: Can`t resolve './src/index.js' in 'User/xxx/webpack5/src'
这下我们翻译一波不就理解了么!原来context
指定到src
为上下文了,则我们内部使用的目标都指定到src目录了。那entry
就不能再写成./src/index.js
了。(你真废话,能讲明白不?)
其实就是一句话:使用了context
后,则入口出口路径都是以context
配置的路径为基准了。因此,entry
就得写成/index.js
或./index.js
, 因为现在/
就指得是src
目录。
把context先删除或者注释了吧,下面的内容用不到。。。
说到entry
了,那我为何就不能有多个入口文件呢?
entry
可以配置多个入口文件,当只有一个的时候值为string
类型,多个的时候就为Array
module.exports = {
entry: ['./src/index.js', './src/test.js'] // 多个为Array,有先后顺序之分
}
我们可以在test.js
中输入一串代码console.log('少装B,不会造雷劈!')
,再执行npm run build
,双击打开dist/index.html
,F12
打开控制台,可以发现:index.js
和test.js
中的内容都输出了。(诶?我就想让test.js
放数组第一位,你会发现,test.js
中的内容先打印了)entry
也是有先后顺序之分的,数组前面的先执行,后面的以此类推。
entry
也可以是object
类型,用的比较少,稍微记一下得了。若你是大牛,需要写自己的js插件引擎啥的,那你就学吧。
下面内容就是说:我不想让index.js
和test.js
打包在一起, 让他们分别打包
entry: {
moment: { import: 'moment-mini', runtime: 'runtime' }, // 将公用部分提出来, 生成dist/moment.js并自动加入到html内,通过script标签加入
reactvendors: { import: ['react', 'react-dom'], runtime: 'runtime' }, // 将公用部分提出来, 生成dist/reactvendors.js并自动加入到html内,通过script标签加入
abc: ['vue', 'react'],
app: {
import: './src/index.js', // 入口文件
dependOn: ['abc'], // 本来app构建时候会打包所有依赖,但这里配置了abc,则就不会将'vue','react'打包在内
filename: 'app.js' // 打包后的文件名称
},
test: {
import: './src/test.js', // 入口文件
dependOn: ['reactvendors', 'moment'], // 本来test构建时候会打包所有依赖,但这里配置了reactvendors,moment ,则就不会将其所需要的包打包在内,而是通过共享形式加入到html中
filename: 'pages/[name].js' // 打包后的文件名称,也可以写成 'pages/test.js',则生产地址为'dist/pages/test.js', [name]: test
},
}
entry: {
app: './src/index.js', // 入口文件,
test: ['./src/test.js', './src/nulls.js'], // 多个入口文件
}
我们测试entry
为以下的配置:
entry: {
app: {
import './src/index.js'
},
test: './src/test.js'
}
因为每次构建都需要删除dist
文件夹才能保证不缓存任何东西,则我们在package.json
中输入:
"scripts": {
"build": "rm -rf ./dist && webpack",
"build:dev": "rm -rf ./dist && webpack --config ./webpack.dev.js" // 这行我写着只是为了方便读者理解
},
// 或者你手动删除一下dist文件夹,不改package.json也行,可能你运行在cmd中不支持rm命令,可以使用git的bash命令行窗口
// windows平台下的vscode自带的命令行可能不支持rm命令,所以手动删除一下dist,就别改package.json文件了
再执行npm run build
如果报错说'rm' 不是内部或外部命令,也不是可运行的程序
,那你就别改package.json
,手动删除dist文件一下即可
可以发现dist
文件夹内有两个js
文件:app.js
和test.js
,再打开index.html
文件,发现它们两个js
文件也都被自动以<script>
标签形式引入了。
我们再改变一点:
entry: {
app: {
import './src/index.js',
filename: 'nba.js'
},
cba: {
import './src/index.js',
filename: '[name].js'
},
}
再执行npm run build
,可以发现dist
文件夹内有:nba.js
和cba.js
总结
context: 指定/
是谁
entry: 指定一个或多个入口文件,dependOn可以共享打包资料
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。