一、webpack 基础
1、概念：
模块化打包工具
2、作用：
将浏览器不识别的语法，转换成浏览器识别的语法
3、工作流程：
通过一个入口文件，找到这个入口文件所依赖的所有模块，通过loader进行打包，打包一个或多个js文件
4、webpack vs gulp
没有可比性
webpack：模块打包机
gulp：前端自动化工具
二、webpack 使用
1、全局安装webpack
npm install webpack@3.5.3 -g
2、创建文件夹 初始化文件夹
npm init -y
3、局部安装 webpack
npm install --save-dev webpack@3.5.3
4、创建 src、dist 文件夹，
5、在 src 文件夹中创建文件 index.js
6、创建 index.html ,以此作为模板
7、创建 webpack.config.js
三、webpack.config.js 配置如下
1、前期准备（各种依赖包）
a、安装处理 css 的 loader
npm install --save-dev style-loader css-loader sass-loader node-sass
b、安装处理 js 的 loader
npm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react
c、插件（根据模板自动生成 html 文件）
npm install --save-dev html-webpack-plugin
d、热更新、服务器
npm install --save-dev webpack-dev-server@2
2、webpack.config.js 示例代码
1 const path = require("path"); 2 const HtmlWebpackPlugin = require("html-webpack-plugin"); 3 4 /* 5 __dirname 当前文件夹的绝对路径 6 path.join() 将第一个参数和第二个参数进行链接 7 */ 8 9 const PATH = { 10 //入口文件 11 app:path.join(__dirname,"./src/index.js"), 12 //出口文件夹 13 build:path.join(__dirname,"./dist") 14 } 15 16 //下面的代码都是 webpack的配置项 17 module.exports = { 18 //入口 19 entry:{ 20 //这里面的key值决定了下面name的名字叫什么 21 app:PATH.app 22 }, 23 //出口 24 output:{ 25 // [name] 指的是前面的 app 26 filename:"[name].js", 27 path:PATH.build 28 }, 29 //做模块的处理 用loader进行处理 30 module: { 31 rules:[ 32 { 33 test:/.js$/, 34 use:{ 35 loader:"babel-loader", 36 options:{ 37 presets:["@babel/env","@babel/react"] 38 } 39 } 40 }, 41 { 42 test:/.(css|scss)$/, 43 //loader的执行顺序是从下至上 从右至左 44 use:["style-loader","css-loader","sass-loader"] 45 } 46 ] 47 }, 48 plugins:[ 49 new HtmlWebpackPlugin({ 50 //生成的文件 51 filename:"index.html", 52 //模板index.html 53 template:"./index.html", 54 /*以下为自定义的属性*/ 55 title:"小甜甜", 56 arr:["张三","李四","王五"] 57 }) 58 ] 59 }
3、模板 index.html 示例代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 // htmlWebpackPligin 是固定的 8 <title><%= htmlWebpackPlugin.options.title%></title> 9 </head> 10 <body> 11 12 <% for(var i=0;i<htmlWebpackPlugin.options.arr.length;i++) {%> 13 <p><%= htmlWebpackPlugin.options.arr[i]%></p> 14 <%}%> 15 16 </body> 17 </html>