前端知识储备（三）Webpack

Webpack 模块化开发打包

• 认识webpack
• webpack的安装
• webpack的起步
• webpack的配置
• loader的使用
• webpack中的Vue
• plugin的使用
• 搭建本地服务器

1.认识webpack

官网解释：
从本质上讲，webpack就是一个现代的JavaScript应用的 静态模块打包 工具。

可以理解为：模块 和 打包。

2.webpack的安装步骤

3.webpack的起步

基本使用：

首先需要一个页面：index.html，然后分别开发js文件，我们暂且起名：main.js 、children.js
在children.js中导出我们使用的方法：

function sum(a,b){
	return a + b
}
function mul(a,b){
	return a*b
}
const num = 10;
var name = "小明";
// CommonJS的抛出方法
module.exports = {
	sum,
	mul,
	num
}

// ES6方法导出
export const name = "Spider";
export const age = "18";
export const height = "1.8"

在main.js中导入我们需要的模块：

//ES6导入
import {name,age,height} from "./aaa";
console.log( name )
console.log( age )
console.log( height )
// 使用commonJS的方法导入
const {sum,mul,num} = require("./aaa.js")
console.log( sum(num,1) );
console.log( mul(num,0) )

在我们首页如果想打印出我们main.js的结果，就需要用webpack打包然后解析出一个浏览器可识别的js方法文件。在当前文件夹下调出“小黑板”，如下图：

命令为（全局的webpack下载状态下使用）：webpack xx.js dist/xx.js
第一个js是我们的入口文件（需要打包的js文件），第二个是我们要把webpack打包后的js放置的位置。
最后在我们的index.html页面上引入webpack打包后的js就可以正常运行了！

4.webpack的配置

	上述说到webpack打包需要敲很长的一个命令，在我们实际开发中，一般我们的代码就放在src文件夹下，main.js就是我们的入口js文件，而打包后的js就放在dist（根据自己的需求和实际情况）文件夹下的某个js文件，我们可以通过配置webpack来减少命令行代码的编写。
	1）配置固定路径/参数：
	首相需要在index.html路径下建立一个webpack.config.js文件，因为路径需要绝对路径，为了我们能在不同文件下使用同一个配置js，所以我们需要获取我们的动态的绝对路径。需要引入Node.js的path模块，代码入下：

// 使用Node.js获取路径
const path = require('path');
module.exports = {
	// 入口
	entry:"./src/main.js",
	// 出口
	output:{
		// 动态获取文件的绝对路径
		path:path.resolve(__dirname,'dist'),
		filename:'bundle.js'
	},
}

这样配置需要引入node的包，需要先在“小黑板”使用：npm init 和 npm install一下，下载依赖包。这时你的文件目录也会多出package.json和package-lock.json两个json文件。
然后你就可以直接在命令行敲webpack就可以完成对main.js文件的打包了。如下图

怎样将命令行中的webpack打包变为我们常见的npm run bulid？

这里顺便讲一下npm run build 打包和npm run dev/serve运行程序的原因。
在我们刚才生成的package.json中，存在一个script脚本对象，我们只需要在中添加build，并是其等于“webpack”即可使用：npm run build来代替webpack命令。
添加前：

添加后：
完成：

两者区别：
直接命令行敲“webpack”打包使用的是全局的webpack。修改成npm run build后，执行会就会先从你本地项目中去找webpack，而不是直接使用全局的。
区别的产生条件：
由于项目可以转移更换电脑，如果在A电脑上装的webpack是3.0的版本打包，但是换到B电脑上是4.0的webpack，打包就会报错，所以最好项目中直接安装固定版本的webpack，这样，你在使用npm run build就不会出现错误，而且比使用webpack命令行要稳定。

在本地项目中下载安装webpack方法：
进入项目文件夹下打卡终端输入命令行：npm install webpack@3.6.0 --save-dev
此时的package.json变成如下：

注意，因为webpack4.0版本升级后，语法也更加严格，需要同时添加开发模式，在package.json中添加：–mode production，并在我们的webpack.config.js 中，填加：mode:“development”，如果不添加，打包后会在最后看到这个警告。

5.loader的使用

loader是webpack中的核心概念
loader的作用： 将ES6代码转为ES5，将Tapescript改为ES5代码，将less，scss改为css，将jsx，vue等文件转为js文件等。这些webpack是不支持的，但是loader可以支持。
安装方法：
1.通过npm安装需要的loader。
2.在webpack.config.js的modules关键字下进行配置。

对css的打包使用
如果使用webpack打包，在index页面就不需要再引入css文件了，直接在我们入口js文件中require（"css路径’’），如图：

这时你在终端敲命令：npm run build 后会报错，如图

这说明你需要下载loader的对css的包才能对css进行打包.
需要敲上命令：npm install --save-dev css-loader
官网机票: https://www.webpackjs.com/loaders/css-loader/.
下载好如图：

然后需要配置webpack.config.js 官网也有写：
因为我们只下载了css-loader，这个只负责加载，不负责解析，所以还要下载style-loader才能解析

最后就引入了样式，如图：

webpack对less，img等的打包
less：
对less,sass等，也需要下载相对应的loader来帮助打包
img：
对img图片这种url的打包需要下载loader的文件打包的，即：url-loader，这里对图片是有大小限制的，如果存在某张图片大于了限制，那还需要下载：file-loader，所以也不知道为啥要整个url-loader，直接用file-loader不就好了吗?其次是对图片名字，打包后存储的位置进行配置，需要在webpack.config.js中配置name，如下图：

6.webpack配置Vue

首先在项目中下载Vue，终端命令行敲：npm install vue --save （这里没有-dev是应为-dev是只在开发模式使用，而我们vue是在项目中使用的，运行和开发都要用，所以不添加dev）
然后在我们的main.js中引入vue模块，并在index页面写入我们的Vue模板。

// Vue配置
import Vue from "vue";
const app = new Vue({
	el:'#app',
	data:{
		message:"Vue-webpack"
	}
})

这时对我们的项目进行webpack打包，打开页面后发现并没有我们的message，因为这里存在两个状态，runtime-only和runtime-compiler，在没有手动添加属性时，webpack会自己走runtime-only，这个状态表示代码中不存在template，我们只需要修改webpack.confige.js，添加resolve。代码入下：

// 使用Node.js获取路径
const path = require('path');

// 配置webpack打包路径
module.exports = {
	// 入口
	entry:"./src/main.js",
	// 出口
	output:{
		// 动态获取文件的绝对路径
		path:path.resolve(__dirname,'dist'),
		filename:'bundle.js'
	},

	// 配置css打包
	module: {
	    rules: [
	      {
	        test: /\.css$/,
	        use: ['style-loader', 'css-loader']
	      }
	    ]
  	},
  	// 不添加这个别名会造成仅加载了没有渲染的问题，
  	// runtime-only 代码中不能有template
  	// runtime-compiler 代码中可以有template
  	resolve:{
  		// alias:别名
  		alias:{
  			'vue$':'vue/dist/vue.esm.js'
  		}
  	}
}

这样重新打包即可。

7.plugin的使用

plugin是插件的意思，在webpack中就是对现有功能的扩充：

1. 添加版权信息

const webpack = requier('webpack')
module.exports={
	plugins:[
		new webpack.BannerPlugin('最终版权归Darryl所有')
	]
}

重新打包后，bundle.js头部就会有版权信息

2. 打包Html页面
   由于index.html文件是放在根目录下的，但是发布的是dist文件夹的内容，如果不连通index.html打包，那js是没有用的，所以需要HtmlWebpackPlugin，该插件会自动生成一个html问价；并且将打包的js文件自动通过script标签插入到body中。

1.安装：
命令：npm install html-webpack-plugin --save-dev

2.修改webpack.config.js文件的plugins部分内容：代码入下

const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
	...
plugins:[
		new webpack.BannerPlugin('最终版权归Darryl所有'),
		new HtmlWebpackPlugin({
            template:"index.html"
        })
	]
}

完成这段代码时要注意首先修改index.html页面，将手写的引入script标签删去，因为打包会自动引入打包的js，其次隐去一开始写的在output：{ publicPath：‘dist/’ }，因为位置也会自动打包正确。

8.搭建本地服务器

命令行输入：npm install --save-dev webpack-dev-server
然后在package.json中配置script命令，添加：

"dev": "webpack-dev-server --open"

就可以使用：npm run dev在本地运行项目，不需要每次修改在重新打包打开，页面会自动刷新，“–open”表示输入npm run dev后自动打开网页浏览。