webpack打包

一、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>