cnpm和npm功能一样,服务器在中国,因此下载速度更快,使用npm install -g cnpm --registry=https://registry.npm.taobao.org
VSCODE终端上 npm init -y 创建一个package.json 初始化项目
创建需要的src和dist目录(默认打包的是index.js)
执行
cnpm I webpack -D
cnpm I webpack-cli -D
创建一个webpacka.config.js设置webpack的配置mode:必填 为production或development使用module.exports(暴露)={
Mode:”development”
}
默认打包入口.src =>index.js,打包输出文件是dist=>main,js(生成在内存中,并不是在目录内,引入即可)
执行webpack 即可执行打包
存在问题
如果引入的打包后的文件,每次更改后不从新打包 则不会更新
存在弊端,每次更改后需要从新打包
解决办法 安装webpack-dev-server
使用 cnpm I webpack-dev-server -D进行下载
在生成的package.json的script里面新建一个成员 “dev”: “webpack-dev-server”
运行的时候使用npm run dev即可 默认地址为http://localhost:8080/ 可以进行修改 后面讲解
在html中引入 只需要/main.js即可 每次修改都能实时在页面相应
端口号可以在dev中设置 例如:改为8888 只需要在“dev”: “webpack-dev-server –port 8888” 中间以空格隔开 还可以设置localhost 同样只需在后面添加—host xxx即可
存在问题进来后不是在首页,需要选择进入首页
如何将首页和main,js一样放入内存中
解决办法需要引入html-webpack-plugin来实现
通过 cnpm I html-webpack-plugin加载完成后在配置文件中进行配置
配置文件 引入path(用来拼接路径) 和 html-webpack-plugin
将html-webpack-plugin实例化,如:
const HtmlWebpackPlugin = require(‘html-webpack-plugin’)
const htmlPlugin = new HtmlWebpackPlugin({
template: path.join(__dirname, ‘./src/index.html’), //源文件
filename: ‘index.html’ //生成在内存中文件的名字
})
然后放入与mode后面一同暴露,如
module.exports={
mode:"development",
plugins:[
htmlPlugin
]
}
实现后可以在html中取消script的引用,默认会自动在后面追加一个script来引入main.js
终端运行npm run dev 即可