01

webpack:模块打包器 一个文件就是一个模块

核心概念：


打包的入口，如main.js

输出，打包之后最后变成的东西

loader：加载器，用来解析各种不同的文件

插件：压缩

安装webpack

npm install webpack -g | npm install webpack -D

npm install webpack-cli -g | npm install webpack-cli -D

demo：

创建一个文件并初始化npm init

创建一个index.js

创建一个utils文件件，在下面创建test.js 可以写js代码

在index里引入test，

执行webpack index.js 打包操作

出现dist文件夹

要创建一个index.html文件，并引入打包的main.js

在浏览器就可以检验代码

配置webpack.config.js文件

需要配置一个基础的入口位置和出口位置，要引入path模块来使用路径，filename为打包好的名字

在package.json下做的命令简化操作

npm run build

PM：

plugin：各种打包、工程化的操作等等，这个是一个数组，要用new的方式创建

插件：html-webpack-plugin 简化打包好的html文件的创建

1.安装 npm install html-webpack-plugin -D

2.引入到webpack.config

3.创建一个public下的index.html

4.要把打包的结果动态插入到public里的index.html

5.在module.exports里配置plugins: [

new HtmlWebpackPulgin({

template: path.join(__dirname, './public/index.html') // 把打包的结果和这里的index.html进行组装，然后到dist

})

]

loaders：对文件代码进行各种加载和编译

在src下创建一个assets下css下style.css并引入到main.js

解析style样式需要安装style-loader css-loader

在webpack.config里的module.exports里配置module

module： {

rules: [ // 规则

{

test: /\.css$/, // 用正则方式判断文件

use: [

{ loader: 'style-loader' },

{ loader: 'css-loader' }

]

}

]

}

解析sass 要安装 sass-loader node-sass

正则简写方法判断css和scss

热更新：devServer

保存时页面自动更新

webpack-dev-server插件

安装：npm install webpack-dev-server (-D || -g)

在webpack.config下的module.exports配置

devServer: {

port: '8888', // 端口

contentBase: path.join(__dirname, './dist'), // 指定静态资源根目录 这里指向了dist

hot: true // 允许热更新

}

启动服务时 webpack-dev-server (加--open为自动打开浏览器)

这里指向了dist文件夹，所以public里的变化不会触发热更新，如要public里的静态index.html保存也触发的话需要改contentBase指向为public，并且output下指向的位置也要改

如果修改public里的代码也不会引起热更新，因为他是静态资源文件，并没有参与打包

热更新原理：在启动服务的时候，浏览器为客户端，devServer为服务端，在底层他们之间有一个WebSocket的通信，如果代码改变并保存，会找出变化并通知webpack进行更新，把代码发给客户端，客户端即不需要更新既可以收到代码

使用npm run serve启动项目