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⾥的依赖是否缺少