WebPack基础

概述

Webpack功能与优势

预处理（TS,Less,Sass,ES6），解析成浏览器识别的css和js
解析文件之间的依赖关系，屏蔽无用文件
图片添加hash，方便线上CDN缓存
模块导入导出
按需加载，有完备的代码分割解决方案

Webpack简单介绍

Webpack是用Nodejs语法写的，就是CommonJS写的

Webpack 4比3多了mode属性，可以设置development或production

Npm和Yarn都是包管理器

mkdir 目录 可以创建目录
cd 目录 进入目录

创建package.json文件

npm init

安装http-server可以启服务，一般项目中不用，只是了解
启服务命令：http-server test，test为目录

webpack命令

webpack安装之后具有webpack命令
将文件打包导出方式：
webpack 导出文件 output 输入目录以及文件名 –mode mode类型

webpack src/test.js --output test/test.js –mode none

mode不设置会压缩文件，相当于production行为；设置为none就不会压缩，相当于development行为。

打包配置以及webpack-dev-server

配置文件打包模块概述

Webpack配置文件就是webpack.config.js
引入：

var webpack = require(‘webpack‘);
var path = require(‘path‘);
var DIST_PATH = path.resolve(__dirname,‘../dist‘);

配置文件内部结构：

module.exports = {
      // 入口js文件	
      entry: path.resolve(__dirname,‘../src/index.js‘),
      // 编译输出的路径
      output:{
	path: DIST_PATH,
	filename:‘index.js‘,
      }
      // 模块解析—预处理ts/less等
      module:{}
      // 插件
      plugins:[]
      // 开发服务器
      devServer:{}
}

根据配置文件打包命令：

webpack –config build/webpack.config.js –mode development

打包命令简化：
可在package.json文件中scripts模块中配置

‘scripts‘: {
      ‘build‘: ‘webpack –config build/webpack.config.js –mode production‘
}

配置完之后就可以直接通过npm run build直接打包了

Webpack-dev-server

Webpack-dev-server就是为了配置开发服务器
安装完Webpack-dev-server服务之后需要到配置文件webpack.config.js中的devServer中配置该服务。
配置功能如下：

hot：true，//热更新
contentBase: DIST_PATH, //热启动文件的文件路径
port:8080, //服务端口
host:‘0.0.0.0‘,//表示可以再服务器外部或者localhost或者IP地址都可以访问
historyApiFallback:true,//项目中的404响应都会替换为index.html
open:true, // 服务启动完成之后自动打开浏览器
useLocalIp:true, // 自动打开浏览器的时候使用自己的IP
proxy:{ // 代理：处理跨域访问接口问题
	‘/api‘:‘http://localhost:3000‘ //表示接口中有api的时候就会代理到http://localhost:3000
},
https:true, // 如果需要https访问接口的话，需要进行该配置

简化启服务的命令如同上面打包一样，需要到package.json文件的scripts模块中配置

‘scripts‘: {
      ‘dev‘: ‘webpack-dev-server –config build/webpack.config.js –mode production‘
}

表示启服务的时候使用webpack.config.js中的配置，使用上面打包的相同配置
命令简化为npm run dev
此时服务启动之后就可以通过http://localhost:8080/index.js访问了，但是dist的文件下面没有index.js文件却还能访问，原因在于启服务打包的文件都在内存中。为什么内存文件在dist目录下面，因为contentBase配置的就是这个目录。此时如果文件有跟新就会立刻反应到我们访问的内存服务页面中，原因在于我们配置了hot。