１：什么是webpack?
模块化的打包工具,就是将js,css,图片…一些浏览器暂时不能识别的通过打包服务器能够识别的,但是webpack是依赖于node环境的,node上要运行多种代码,就需要很多包,就有一个npm的工具(管理node上的各种工具)
2:案例 common.js
模块1
math.js模块
function add(num1,num2)
{
return num1+num2;
}
function dec(num1,num2)
{
return num1-num2;
}
module.exports={
add,
dec
}
模块2
main.js
const {add,dec}=require('./math.js')
console.log(add(1,2));
这个时候不能在html代码中直接引用,浏览器不能直接识别comm.js的代码.所以要通过打包工具webpack,进行打包成浏览器直接可以识别的js文件,进行引用.这个时候webpack会自己去解决各个模块之间的依赖关系.
打包
webpack ./webpack/src/main.js ./webpack/dist/bunle.js
引用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../dist/bunle.js"></script>
</head>
<body>
</body>
</html>
案例二es6的模块化
模块1info.js
export const name="小明";
export const age=20;
export const sex="女"
模块2main.js
import {name,age,sex} from './info.js'
console.log(name,age,sex);
打包过程和上面的一样
3:为了简化打包输入过多的指令,可以在webpack.config.js中进行配置
1)npm init初始化项目
在node开发中使用npm init会生成一个pakeage.json文件，这个文件主要是用来记录这个项目的详细信息的，它会将我们在项目开发中所要用到的包，以及项目的详细信息等记录在这个项目中。方便在以后的版本迭代和项目移植的时候会更加的方便。也是防止在后期的项目维护中误删除了一个包导致的项目不能够正常运行。使用npm init初始化项目还有一个好处就是在进行项目传递的时候不需要将项目依赖包一起发送给对方，对方在接受到你的项目之后再执行npm install就可以将项目依赖全部下载到项目里。话不多说我们就直接开始进行操作。
https://www.cnblogs.com/WD-NewDemo/p/11141384.html
2)为了简化打包输入过多的指令,可以在webpack.config.js中进行配置
把那个地方的js打包到什么地方去
//引入node的path的核心模块
const path=require('path');
module.exports={
//打包的路径
entry:'./webpack的配置/src/main.js',
//打包到哪儿
output:{
//绝对路径
path:path.resolve(__dirname,'dist'),
//文件的名字
filename:'bundle.js'
}
}
控制台直接输入webpack的时候就可以进行打包了
4:把webpack映射到 npm run bulid上可以,直接在控制台输npm run bulid进行打包.
{
"name": "meetwebpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
改成
{
"name": "meetwebpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build":"webpack"
},
"author": "",
"license": "ISC"
}
npm run build 进行打包
webpack和npm run build 的区别
npm run build 是会在本项目的webpack中找没有就去找全局的,
webpack 会在全局的webpack中找
安装局部webpack
{
"name": "meetwebpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
//局部的webpack
"devDependencies": {
"webpack": "^3.6.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build":"webpack"
},
"author": "",
"license": "ISC"
}
转载：https://blog.csdn.net/qq_44788119/article/details/116276596