WebPack基础

标签：hot   pat   dir   pre   就会   ESS   var   简化   外部   

概述

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。

WebPack基础

标签：hot   pat   dir   pre   就会   ESS   var   简化   外部   

原文地址：https://www.cnblogs.com/mu--yu/p/14009632.html