webpack

什么是webpack？

 咱用大白话来说就是将项目模块化文件打包生成普通的脚本文件，然后引入到index.html文件中。要是想要更深入的理解的话就去康康webpack官方的文档吧

为什么要使用webpack？

因为开发的时候使用的是前端模块化，但是浏览器对模块化的支持程度低，需要借助webpack打包工具，将模块化代码打包生成浏览器支持的规范。

使用：

第一步：快速初始化文件夹成为一个项目

cnpm init -y

案例：

初始化了一个名为app01的项目：

第二步：安装

cnpm i webpack webpack-cli --save-dev        //--save-dev 表示开发阶段

根据需要下载第三方库

本文用到了qs 和lodash库

cnpm i qs lodash -S

 根据需求下载插件

本文下载两个插件

cnpm install --save-dev html-webpack-plugin

cnpm i --save-dev webpack-bundle-analyzer

在app01项目下新建一个存放源码的文件夹  src  

各个文件的代码如下：

a.js文件代码：

import qs from 'qs';
let obj={
    name:"lili",
    age:18,
}
export default {
    url:"/user/login ",
    data:qs.stringify(obj)
}

 b.js代码：

import _ from 'lodash';
let obj={
    name:"xixi",
    age:15
}
export default _.cloneDeep(obj)

 main.js代码：

import a from './a';
import b from './b';
import './style/style.css';
import './style/main.scss'

let dom =document.createElement('div');
dom.innerText=JSON.stringify(a);
document.body.appendChild(dom);


let dom2 =document.createElement('div');
dom2.innerText=JSON.stringify(b);
document.body.appendChild(dom2);

style.css代码：

body{
    background-color: aqua;
    font-size: 28px;
    width: 100px;
}

main.scss代码：

body{
   $color:rgb(3, 16, 16);
    color: $color;
   background-color: rgb(136, 207, 89);
}

 

第三步：在webpack.config.js配置webpack

entry:"项目的入口文件"，

output："输出文件"

插件：plugins:[]

下面就简单地三个插件吧，想要更多的了解的话就去文档里看吧因为插件属实有点多了。

1.htmlWebpackPlugin  自动生成打包后的html文件并自动引入打包好的脚本文件。

2.webpack-bundle-analyzer  可视化图形插件，分模块化大小。

3.sliptChunks 抽离公共重复的依赖，单独放在一个脚本文件，优点:优化前端性能。

loader 加载器  解释非js文件  比如sass css png等等。

webpack.config.js文件代码：

const path=require('path');
//1.引入插件 HtmlWebpackPlugin和 BundleAnalyzerPlugin
const HtmlWebpackPlugin = require('html-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports ={
	mode:'development',  //开发模式
	entry:"./src/main.js",//入口使用相对路径
	output:{
		path:path.resolve(__dirname,'dist'),
		filename:"bundle.js",
		clean:true //进行第二次打包时，把上一次的给清空掉
	},
//2. 使用插件
	plugins:[new HtmlWebpackPlugin(),new BundleAnalyzerPlugin()],


	module:{
		// 可以设置非js文件的转换规则
		rules:[
			{
				test:/\.css$/,
				use:['style-loader','css-loader']
			},
			{
				test:/\.s[ac]ss$/,
				// 注意一下: loader的执行顺序
				use:['style-loader','css-loader','sass-loader']
			}
		]
	}
}


	

在package.json文件添加打包的命令：

执行打包命令：

npm run build 

 运行之后就会出现dist文件，运行dist文件里的index.html，运行结果如下：

使用webpack-bundle-analyzer的效果：