webpack4的安装过程
⼀、先安装node（因为webpack是基于node.js的项⽬构建⼯具）
⼆、先创建⼀个放项⽬的包（英⽂包名）
1.创建src，dist
2.项⽬进⾏初始化
npm init -y
对项⽬进⾏初始化，此时会⾃动⽣成package.json⽂件，此⽂件是模块的描述⽂件 ，npm install命令根据这个配置⽂件⾃动下载所需的模块，，创建webpack需要的node环境
3.局部安装webpack ，安装的版本不宜过⾼，不然后边会报错
npm install webpack@4.20.2 -D          安装webpack
npm install webpack-cli@3.1.2  -D    安装webpack-cli
npm install webpack-dev-server@3.1.9 -D    安装webpack-dev-server
4.创建fig.js⽂件
配置内容,
const path=require('path')
const webpack = require('webpack');
webpack打包流程 面试mode:'development',
entry:path.join(__dirname,'./src/main.js'),    //⼊⼝，使⽤webpack要打包的⽂件
output:{                                          //出⼝，指定打包好的⽂件输出的⽬录位置
path:path.join(__dirname,'./dist'),
filename: 'bundle.js',  //打包好的编译⽂件
},
devServer: {
open: true,//⾃动打开浏览器
port: 3300,//运⾏端⼝号
contentBase: 'src',//托管⽬录
hot:true
},
plugins:[
new webpack.HotModuleReplacementPlugin(),
//热模块更换（hmr)，能够实现局部刷新，需要设置hot:true，和⼿动设置这个插件
],
watch:true,
}
5，package.json的配置
在script中配置如下
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack --mode development",
"dev": "webpack-dev-server"
},
运⾏npm start 对项⽬进⾏打包
使⽤npm run dev 运⾏项⽬
ps：如果有关于提⽰node_modules的错误信息，可把node_modules删掉，使⽤npm install命令重新下载所需要的依赖注意创建的js⼊⼝⽂件是否和fig.js⾥配置的⼊⼝⽂件名称是否⼀致
要检查package.json⾥的依赖是否缺少

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