<>什么是Webpack?

Webpack 是一个开源的前端打包工具。Webpack 提供了前端开发缺乏的模块化开发方式,将各种静态资源视为模块,并从它生成优化过的代码。
Webpack 可以从终端、或是更改 webpack.config.js 来设置各项功能。 要使用 Webpack 前须先安装
Node.js。(以上介绍来自百度,看着懵逼的话可以看我下边自己总结的)

Webpack是前端的一个自动化工具,有了它可以大大提高我们写项目的效率,比如你可以对css,js文件进行自动压缩,把sass代码自动解析成对应的css文件,让你的代码和样式实时的显示在浏览器上等等,当然,我们使用webpack的最终目的还是为了项目完成后进行打包,webpack并不强制你使用AMD或者CMD这之中的某一种方案,而是通过兼容所有模块化方案让你可以无痛接入项目,有了webpack,你可以随意选择你喜欢的模块化方案,至于怎么处理模块之间的依赖关系及如何按需打包,webpack会帮你处理好。

<>Webpack的核心概念

<>在使用webpack之前,我们首先要明白它的核心概念

*
<>entry 入口

webpack是根据入口文件开始打包的,入口文件也就是最先使用依赖的文件

*
<>output 输出

文件打包好之后输出到哪个文件夹,打包好的文件名都在这里设置

*
<>loader 加载器

因为webpack本身只可以去压缩js文件,所以当我们需要去处理其他非js文件时,就需要安装对应的loader

*
<>plugins 插件

插件可以使webpack执行范围更广的任务,比如:
1. 打包优化
2. 压缩
3. 重新定义环境中的变量
4. 使生成的js自动引入html页面

使用一个插件 只需要 require 它。 然后给它添加到 plugins 数组中。 多数插件可以通过 options 来定义。
注意:如果你在一个配置文件中多次的使用同一个插件时,这时候需要通过new 操作符来重建一个新的实例。

<>如何使用webpack对vue现有项目进行打包

* 在vue.config.js中 module.exports={ publicPath:'./', //设置相对路径 assetsDir:'./',
//设置相对路径 devServer:{ } }
* 在路由router里的index.js里 const router=new VueRouter({ routes, mode:'hash'
//hash模式 })
* package.json里添加 "scripts":{ "serve":"vue-cli-service serve", //启动的方法 npm
run serve "build":"vue-cli-service build" //打包的方法 npm run build }

技术
今日推荐
下载桌面版
GitHub
百度网盘(提取码:draw)
Gitee
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:[email protected]
QQ群:766591547
关注微信