分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 代码编程

webpack4.1.1的使用详细教程

发布时间:2023-09-06 01:46责任编辑:顾先生关键词:webpack

安装全局webpack

  cnpm install -g webpack

安装全局webpack-cli

  npm install -g webpack-cli

初始化:生成package.json文件

  npm init

安装包

  npm install --save lodash

新建src文件夹:文件名不能修改

新建index.html文件,注意src="./dist/main.js,不能修改

目录结构如下:


webpack4.x的打包已经不能用webpack 文件a 文件b的方式,而是直接运行webpack --mode development或者webpack --mode production,这样便会默认进行打包,入口文件是‘./src/index.js‘,输出路径是‘./dist/main.js‘,其中src目录即index.js文件需要手动创建,而dist目录及main.js会自动生成。

因此我们不再按webpack 文件a 文件b的方式运行webpack指令,而是直接运行

  webpack --mode development

  webpack --mode production

这样便能够实现将‘./src/index.js‘打包成‘./dist/main.js‘。

不过每次都要输入这个命令,非常麻烦,我们在package.json中scripts中加入两个成员:

  "dev":"webpack --mode development",

  "build":"webpack --mode production"

执行webpack --mode development

 

执行npm run dev,相当于执行webpack --mode development

webpack4.1.1的使用详细教程

原文地址:https://www.cnblogs.com/navysummer/p/8650281.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved