⾯试被问到webpack配置
⾯试被问到webpack配置
当时太悲剧了，这⼀块太久没注意，⼀直都是做项⽬写业务页⾯⽐较多，竟然忘记了，还乱答⼀通，还说要配置vue-loader、引⼊path、引⼊需要应⽤的函数，时候真想ps⾃⼰。
webpack配置：在pakage.json⾥配置执⾏命令，然后⼊⼝和出⼝是基本的。
答出以上三点基本得分
安装webpack
⾸先，安装webpack，这⾥就直接全局安装
//终端执⾏,npm不⾏就⽤cnpm
npm i webpack -g
//使⽤webpack4+版本，就要继续安装cli
npm i webpack-cli -g
package.json
接着，开始创建项⽬⽂件夹名称改为：webpack
打开终端进⼊webpack⽬录下
//-y可以直接默认创建package.json⽆须⼀步步配置参数
npm init -y
创建⼊⼝⽂件
第三步，我喜欢把⼊⼝⽂件放在src⽬录⾥，这⾥需要创建src/main.js
注意这⾥需要把pakage.json⾥的main的值改为："src/main.js"⽅便阅读
webpack配置
第四步，在webpack⽬录下创建fig.js
// fig.js
const path =require('path');
const config ={
entry:'./src/main.js',// 配置⼊⼝⽂件
// 配置：出⼝⽂件
output:{
webpack打包流程 面试path: solve(__dirname,'dist'),//配置输出路径
filename:'bundle.js',//配置：输出⽂件名称
},
mode:'production',//选择的模式告诉webpack使⽤其内置的优化:production、development、none    plugins:[]
};
配置执⾏命令
在package.json⽂件的script⾥配置执⾏命令
为了测试在src/main.js写⼊console.log("Hello Webpack");
在终端敲⼊：npm run start就可以看到dist有⼀个bundle.js
在dist⾥⼿动创建index.html，然后在⾥⾯引⼊bundle.js，最后打开index.html，你会看到控制台有输出⽇志：Hello Webpack
加⼊插件
为了简化⼿动去创建index.html⽂件，我们加⼊⼀个插件
// 如果npm不能下载，可以换cnpm
npm i html-webpack-plugin -D
然后再回到fig.js进⾏导⼊和调⽤
// fig.js
const path =require('path');
const htmlWebpackPlugin =require('html-webpack-plugin');//导⼊插件
const config ={
entry:'./src/main.js',
output:{
path: solve(__dirname,'dist'),
filename:'bundle.js',
},
mode:'production',
plugins:[
new htmlWebpackPlugin()//引⼊插件
]
};
这个时候删除dist⾥的所有⽂件，执⾏启动命令npm run start就可以看到dist⾥有index.html 注意这个时候index.html仅插⼊js⽂件，但是在body⾥显⽰⼀个div节点怎么办呢?
//如果想在index.html插⼊⼀下代码怎么办
<div id="root"></div>
只需要配置html-webpack-plugin插件⾥的template属性就可以了
// fig.js
const path =require('path');
const htmlWebpackPlugin =require('html-webpack-plugin');//导⼊插件
const config ={
entry:'./src/main.js',
output:{
path: solve(__dirname,'dist'),
filename:'bundle.js',
},
mode:'production',
plugins:[
new htmlWebpackPlugin({
template:'./src/index.html'//创建src/index.html，否则启动会报错
})//引⼊插件
]
};
如果做好以上配置，没有添加./src/index.html就会报错
创建src/index.html⽂件
最后敲⼊npm run start既可以看到我们想要的结果如图

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。