©2020-2024 ioDraw All rights reserved
<>什么是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 }