从上图我们可以看出,webpack 可以将多种静态资源 js、css、sass文件等转换成一个静态文件,以此可以减少页面的请求,从而提高浏览器响应速度
1.安装开发依赖包
npm install webpack webpack-cli -D
2.添加打包配置文件
webpack.config.js(执行打包命令时会默认执行)
const path = require('path'); module.exports = { //development:开发模式,production:生产(上线)模式 mode: 'development', //打包文件的入口 //单个文件 entry: './src/index.js', //多个文件 // entry: { // index: './src/index.js', // //other: './src/other.js' // }, //打包文件的出口 output: { //打包后的文件 //单个文件 filename: 'js/bundle.js', //多个文件 //filename: 'js/[name].bundle.js', //打包后的文件所在目录,对于webpack命令有效; //而对于webpack-dev-server命令无效,其打包后存储在devServer开发服务器内存根目录下('/'),所以我们无法查看 path: path.join(__dirname, './dist') }, };
3.打包命令
-
开发打包命令
npx webpack --watch(监听程序是否修改,若程序修改,自动重新打包) 或者 npm run dev (先在package.json文件的scripts选项添加 "dev":"webpack" 配置) 打包成功后,html文件就可以手动导入打包后所需的目标文件; 当然我们也可以事先安装好html-webpack-plugin插件,然后在webpack.config.js配置文件中设置相关配置,就不需要我们手动导入打包后的文件了,该插件可以帮助我们把打包后的文件自动注入到配置好的html文件中,该html文件也会在导出目录中自动创建。
-
生产(上线)打包命令
npx webpack -p(或者--production) 或者 npm run build (先在package.json文件的scripts选项添加 "build":&#