webpack4的基本使用

Webpack

将近期学习webpack过程总结记录下来

webpack是什么

	webpack是一个基于Node的前端项目构建工具，是一种**模块化**的解决方案，在webpack中一切都是模块，
	这意味着我们可以把任何**静态资源**分割成**可控**的模块，以供重复使用。

webpack的主要作用：

• 将所有静态资源进行合并压缩
• 使用前端模块化处理项目中的文件依赖关系
• 将高级JS语法转换成为低级可支持的JS语法
• 

webpack的安装

在自己多种下包方式的体验后，首推 cnpm！！！，个人学习webpack学习难点以及问题70%出在包上面吧 ? , 因为下载丢包会报一些奇怪的问题，而且下包在网络不是特别给力的时候是很耗时的。

安装包工具推荐?

cnpm -------- (淘宝镜像！！!) 墙裂推荐，特别快！
推荐指数 ⭐⭐⭐⭐⭐

npm安装插件是从国外服务器下载，受网络影响大，可能出现异常（速度较慢），如果npm的服务器在中国就好了，
 所以我们乐于分享的淘宝团队干了这事。“这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，
 同步频率目前为 10分钟 一次以保证尽量与官方服务同步。” from官网;

Tips：cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm。

// 安装cnpm
npm install  cnpm  -g

• -g 表示安装在全局,工具类型的包应安装在全局
• install 可使用简写 i

yarn
推荐指数 ⭐⭐⭐⭐
在用cnpm之前用的是yarn,下载速度还可以，但是我在下载某一些丢包率高的包的时候，用的不顺心，然后就换了。

//  使用cnpm/npm 下载yarn
	cnpm  i  yarn  -g      
/*
	安装
	将yarn安装包的路径配置到环境变量的path中
	
	1. 按win+r输入sysdm.cpl
	2. 选择高级-环境变量
	3. 将yarn的bin目录添加到系统变量的path中
*/
//	使用 yarn 下载包
	yarn   add    包名
//使用 yarn  下载全局包
	yarn    global    add    包名 

npm
推荐指数 ⭐⭐⭐
下包速度较慢，指令与cnpm相同

安装webpack
介绍完安装包的一些工具，就可以正式的开始安装webpack啦~，以下步骤都是使用cnpm安装

• webpack以及webpack-cli 安装在全局环境下，webpack打包需要webpack-cli
  cnpm i webpack webpack-cli -g（两个包也可分开下载）

• 如果安装成功可以检查到 webpack 版本号
  webpack -v
  

说明:查资料，上网查说是webpack3.0及其以上或4.0以下版本自带webpack-cli，不需要额外安装。而4.0以上则需要。具体是不是没试过，我下载的版本是4.0以上的，需要下载webpack-cli。

简单配置------webpack的基本使用
1） 新建文件夹，在文件夹中初始化package.json文件

 cnpm  init         ----  手动初始化
 cnpm  init  -y    ----  自动初始化	

2. 在项目文件夹中创建以下子文件夹以及文件
   
   webpack 默认入口文件是index.js
   webpack的配置是使用它的核心，主要有入口，输出文件，模式、 Loader、插件（Plugin)等几个部 分。
   webpack.config.js是它的配置文件
   在index.js中书写代码,通过执行webpack这个命令进行编译,会输出到dist下的main.js里面,main.js是webpack打包输出的，在4版本之前是bundle.js，配置也有不同的地方。

在输入webpack打包命令之前还需要配置一下webpack.config.js，不然会提示你配置一下模式
mode:有三个参数
-production：线上模式，打包代码全部进行了压缩
-development：开发模式 代码按原格式展示
-none

没配置的提示?

打包输出文件main.js

打包成功后的信息

webpack-dev-server

	这是一个运行在8080端口（端口可修改）的基于Express 的 node.js服务器。这个服务器会在内部调用Webpack。
	它的优势就是提供了额外的能力--类似可以刷新浏览器的“Live Reloading”，以及局部更新模块的模块热重载功能等等

• 可以开启一个基于express的服务器
• 可以将当前项目进行托管，托管的根目录就是项目的根目录。托管之后可以监听每个文件的打包编译的命令
• 通过这个工具来实现打包编译的功能，与webpack命令用法完全一样。依赖于局部作用域的webpack、webpack-cli

注意：如果想要正常运行，在本地项目中，必须安装webpack、webpack-cli

下载webpack-dev-server

//1.在项目文件夹下安装webpack-dev-server  webpack webpack-cli
cnpm  i  webpack-dev-server  webpack  webpack-cli

设置参数

1) 在package.json文件中可做一下配置
"scripts":{
			"dev":"webpack-dev-server  --open   --port  12345  --hot   --inline  --contentBase src"
}
2) 也可在webpack.config.js中设置

open ---------------> 自动打开浏览器
port ----------------> 指定端口号
hot ------------------> 热重载
inline---------------> 自动刷新浏览器
contentBase-----> 指定静态资源托管
…
执行项目
npm run dev
写了一个简单的背景颜色测试demo (使用了jquery,需下载或引入jquery包)

npm run dev —> 页面在服务器上打开—>可以看到body的背景色为pink 即算成功~

可设置自动打开，也可以通过自己设置的端口号访问

Plugin

下面介绍一下插件~

html-webpack-plugin

	根据指定的**模板文件**生成一个内存中的html文件
	在生成好的html文件里面自动引入打包好的main.js文件

1）安装 cnpm i html-wepack-plugin
2) 在webpack.config.js中书写插件配置

① 引入该插件：
		const HtmlWebpackPlugin = require('html-webpack-plugin')

②			module.exports = {
  					mode:'development',
	  				plugins:[
	    				new HtmlWebpackPlugin({
	      				// 模板文件‘
	      				template:path.join(__dirname,'./src/index.html'),
	      				// 生成在内存中的文件名称, 一般都必须写index.html
	      				filename:'index.html'
	    				})
	  				]
			}

注意: 使用html-webpack-plugin这个插件之后,需要删除调用模板index.html里面的js文件导入

Loader

然后开始解决如何引入css文件啦~

	webpack默认只能打包处理 JS 类型的文件，无法处理 其他的非JS 类型的文件
	而且平时直接在html中引入css文件会发送二次请求。作为前端工作者当然要进行性能优化，减少请求啦嘻嘻~	

style-loader&less-loader

可以解析后缀为.css的文件，将css样式以内联样式的方式插入到html页面中；

1）下载相关loder加载器
cnpm i style-loader css-loader less-loader -D
2) 配置webpack.config.js
打开webpack.config.js这个配置文件，在里面新增一个配置节点

打开webpack.config.js这个配置文件，在里面新增一个配置节点
		module:{
			rules:[
				{test: /\.css$/,use: ['style-loader','css-loader']}  //解析css文件格式
											----  顺序不能交换！(待会会解释?)
				{test:/\.less$/,use:['style-loader','css-loader','less-loader']}  //解析less格式文件
			]
		}

module — 这个节点用于配置所有第三方模块加载器
所有第三方模块的匹配规则都写在rules中

sass-loader

	解析后缀为scss的文件

1）安装解析scss文件的加载器
cnpm i sass-loader node-sass --dev
sass-loader 依赖于node-sass,想使用必须得下载node-sass
❗ ❗❗ 在这里特别提一下，反正我下包在这里阵亡了，node-sass丢包几率90%,网速不是特别稳定的话，下载很容易出问题！！！，最后我是把node-modules中的包全部删除，然后一次性下载，才结束了这个问题，中间下载了无数次node-sass!!!?

2） 配置webpack.config.js

rules:[
        {
            test:/\.scss$/,
            use:['style-loader','css-loader','sass-loader']
        }
]