Webpack

什么是Webpack?

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

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

Webpack的核心概念

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

1. entry 入口

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

2. output 输出

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

3. loader 加载器

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

4. plugins 插件

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

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

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

1. 在vue.config.js中

module.exports={
     
		publicPath:'./',  //设置相对路径
		assetsDir:'./',	//设置相对路径

		devServer:{
     

		}
	}

2. 在路由router里的index.js里

const router=new VueRouter({
     
		routes,
		mode:'hash' //hash模式
	})

3. package.json里添加

"scripts":{
     
		"serve":"vue-cli-service serve", //启动的方法 npm run serve
		"build":"vue-cli-service build" //打包的方法 npm run build
	}