前端webpack初识(marksehng)

el/2024/3/2 12:23:47

安装步骤    

1.npm init               npm init -y    //没有过程选择

2.安装webpack webpack-clicli是可以让我们在命令行中使用webpack

     npm install webpack webnpm pack-cli -D

3.npx指令会从当前目录中查找webpack

npx webpack -v    //查找当前目录的webpack版本
npm webpack -v    //查找全局目录的webpack版本

4.查找包版本

npm info 包名

5.添加一些基本js文件(简单命令:px webpack   ./文件名)   

路径要写对

6.翻译不方便,所以添加webpack.config.js配置文件,并且做基本的配置。

 

const path = require('path');entry: {//名字随便添加main: './index.js',	//入口文件
},    //打包入口
//输出目录
output: {chunkFilename: '[name].chunk.js',	//非入口文件名称// publicPath: 'scripts/',  //在页面引用js的时候在前面加上这个路径filename: '[name].js',  //生成的文件名,[name]是在entry中定义的key值,也可以使用[hash]占位符path: path.resolve(__dirname, '../dist') //打包路径,__dirname是webpack.config.js这个文件所处的文件夹
}现在可以通过如下命令来进行打包。npx webpack --config ./webpack.config.js
npx webpack	//可以省去后面的--config配置,因为会自动识webpack.config.js配置文件为了万一使用`npm webpack`使用全局`webpack`打包并且规范化,所以需要将这个指令添加至`package.json`里的`scripts`中。"scripts": {"build": "webpack"
}最后可以使用`npm run build`命令来运行。

标题

 


http://www.ngui.cc/el/2883536.html

相关文章

项目遇到的问题锦集

用户登陆无法实现页面跳转问题,总是将页面跳到缺省页面/ok.jsp 解决方案:无法实现用户的useType校对,数据表中的userType为空页面刷新时会跳屏 原因是js中有修改css样式的语句 而该js文件又放在了body底部 所以当结构生成完 样式还没有开…

每日总结10

第二周考试 1.this关键字(指向问题) 不管是什么场合,this:它总是返回一个对象。 JS(ES5)里面有三种函数调用形式: 作为对象方法的调用:函数还可以作为某个对象的方法调用&#xff…

网络类型

分一下三种; 局域网 广域网 城际网

this指向问题(私人版)

开局一张图,装备全靠打 1、作为对象的方法调用 当函数作为对象的方法被调用时,this指向该对象 var obj { a: yuguang, getName: function(){ console.log(this obj); console.log(this.a); } }; obj.getName(); // true…

面试总结啊

请在招聘软件上说一下那个公司,我都对不上啦,谢谢 北京平步科技有限公司 法定代表人: 陶光慧 地址:北京市海淀区知春路甲48号盈都大厦3号楼3单元19A 一、项目 学捷后台管理系统(PC端) 项目介绍:该项目…

面试题(marksheng私人版)

JS中的块级作用域,var、let、const三者的区别

前端向后端调用接口的方式

传统方式: axios(常用) 前提是安装了axios main.js中引用 import axios from axios Vue.prototype.$http axios get方式: httpGet(){ this.$http.get(apis/webapi/index/product) .then( (res) > { this…

JS之温故而知新(marksheng)

模板字符串(超级字符串) var name 小明; var age 20; var message 你好, ${name}, 你今年${age}岁了!; alert(message); toUpperCase toUpperCase()把一个字符串全变大写: var s Hello; s.toUpperCase(); // 返回HELLO toLowerCase…

react学习(marksheng)

第一步(安装工具,生成项目,启动项目) 通过 npm 使用 React 使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm: npm install -g cnpm --registryhttps://registry.npm.taobao.org npm config set regist…