webpack是什么,用来干什么?
webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具;
webpack的下载安装
官网文档地址:https://webpack.js.org/
一般情况下借助node安装和下载,所以安装node时webpack的前提条件;
webpack的安装(webpack、webpack-cli)
全局:npm install webpack webpack-cli –g
局部:npm install webpack webpack-cli –D
webpack打包都是用来干什么?
1:JavaScript的打包:
将ES6转换成ES5的语法;
TypeScript的处理,将其转换成JavaScript;
2:Css的处理:
CSS文件模块的加载、提取;
Less、Sass等预处理器的处理;
3:资源文件img、font:
图片img文件的加载;
字体font文件的加载;
4:HTML资源的处理:
打包HTML资源文件;
5:处理vue项目的SFC文件.vue文件;
webpack打包
直接webpack打包
流程:
创建一个文件夹(最好文件名为英文),然后直接cd到该文件目录下,直接执行命令webpack,即可见到在该文件夹下创建了一个名为个dist文件夹,里面存放一个main.js的文件,就是我们打包之后的文件;
弊端:
1:打包不彻底,依然存在ES6语法等;
2:代码被压缩;
3:webpack依赖于会查找当前目录下的 src/index.js作为入口,没有这个入口则会报错,如:
解决方式:我们也可以通过配置来指定入口和出口,如:npx webpack --entry ./src/main.js --output-path ./build
其中/src/main.js为入口文件;./build为出口文件;
webpack局部打包
流程:
第一步:创建package.json文件,用于管理项目的信息、库依赖等;
npm init
第二步:安装局部的webpack
npm install webpack webpack-cli -D
第三步:使用局部的webpack
npx webpack
第四步:在package.json中创建scripts脚本,执行脚本打包即可
npm run build
Webpack配置文件
流程:
以在根目录下创建一个webpack.config.js文件,来作为webpack的配置文件
继续执行webpack命令,依然可以正常打包
npm run build
如果我们的配置文件并不是webpack.config.js的名字的文件时,而是wk.config.js,可以通过 --config 来指定对应的配置文件;
webpack --config wk.config.js
但是每次这样执行命令来对源码进行编译,会非常繁琐,所以我们可以在package.json中增加一个新的脚本;执行行 npm run build来打包即可;
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)