一、Webpack
1、webpack 是什么？有什么用？有哪些同类工具？
（1）WebPack是一个前端资源打包，可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，vue等），并将其打包为合适的格式以供浏览器使用。
- 因为webpack默认只认识js模块，其他的模块都需要相应的loader或plugins插件来解析
（2）用途
- 构建单页应用（disk）
- 代码压缩
（3）同类工具
- fis3
- grunt
- gulp
2、webpack安装步骤（https://www.webpackjs.com）
- -g：全局安装
- --save-dev：添加到 当前目录的package.json 文件 devDependencies 键下
（1）安装node.js（node.js提供了npm）
（2）安装淘宝镜像
- npm config set registry http://registry.npm.taobao.org/
（3）安装打包工具
- npm i webpack -g
（4）安装打包配套工具
- npm i webpack-cli -g
3、node.js模块系统
（1）导出：module.exports = 导出内容
const cat = {
name: '白猫',
color: 'white'
}
module.exports = cat;
（2）导入：require( ' 文件路径 ' )
const dog = require( './dog.js' );
console.log(dog.name);
（3）打开终端运行：node index.js，查看是否正常输出
二、Webpack的核心的概念
1、入口和出口
- entry：入口：告诉webpack从哪里开始打包
- output：出口：输出的文件路径以及文件名
2、模式（环境）mode
- 开发环境：development（不压缩代码）
- 生产环境：production（压缩代码），一般默认压缩代码
3、loader：加载器（解释器）
- webpack默认只认识js模块，其他的模块都需要相应的loader来解析
4、plugins：插件
- 安装html-webpack-plugin插件
5、dev-server
- 能够实时更新页面，边看边改
- （1）安装：npm i webpack-dev-server -g
- （2）配置devServer
- （3）运行命令： webpack-dev-server
- （4）配置启动命令：npm run (dev) ，dev是根据自己的命名
-
在package.json文件的scripts配置：
配置启动命令npm run dev.jpg
6、alias别名：例如@代替src
5、alias别名配置.jpg
代码整体思路：
- （1）新建文件夹
-
（2）初始化package.json
- npm init -y
-
（3）创建入口文件（一般命名main.js）
- 一般用于导入css，js文件相关联等等
- （4）创建webpack.config.js用于配置打包
- （5）导入path（node.js自带的模块，用于处理路径相关联）
- （6）配置入口（entry）与出口（output）文件
entry: '入口文件路径',
output: {
//出口路径，__dirname：当前目录，'dirst'：所存放的文件夹
path: path.resolve(__dirname, 'dirst'),
filename: 'Grayly.js' // 生成的文件名
},
-
（7）mode：模式配置（开发的环境）
- development或production
-
（8）loader配置
- 安装css-loader：npm i css-loader --save-dev
- 安装style-loader：npm i style-loader --save-dev（因为css-loader依赖styke-loader）
-
（9）安装plugins插件
- 安装html-webpack-plugin插件：npm i html-webpack-plugin --save-dev
- （10）导入html-webpack-plugin模块
//导入html插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
- （10）配置plugins插件
plugins: [
new HtmlWebpackPlugin({ template: './index.html' }) //html文件的路径
]
-
（11）为npm包目录创建软链接
- 安装：npm link webpack --save-dev
完整代码
/**
* 配置文件
*/
//1、导入path
const path = require('path');
//导入html插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
//2、配置入口与出口
module.exports = {
//配置入口文件，告诉webpack从哪里开始打包
entry: './main.js', //入口文件路径
//配置出口
output: {
//出口路径，__dirname：当前目录，'dirst'：所存放的文件夹
path: path.resolve(__dirname, 'dirst'),
filename: 'Grayly.js' // 生成的文件名
},
//3、模式（环境）：开发环境：development（不压缩代码），生产环境：production（压缩代码）
mode: 'development',
//4、loader：加载器（解释器）
module: {
rules: [
{ // 识别规则
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
],
},
//5、plugins插件
plugins: [
new HtmlWebpackPlugin({ template: './index.html' })
]
}
