webpack打包

Posted jokehl

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack打包相关的知识,希望对你有一定的参考价值。

 
一、webpack 基础
    1、概念:
        模块化打包工具
 
    2、作用:
        将浏览器不识别的语法,转换成浏览器识别的语法
 
    3、工作流程:
        通过一个入口文件,找到这个入口文件所依赖的所有模块,通过loader进行打包,打包一个或多个js文件
 
    4、webpack vs gulp
        没有可比性
            webpack:模块打包机
            gulp:前端自动化工具
 
二、webpack 使用
    1、全局安装webpack
        npm install [email protected] -g
 
    2、创建文件夹 初始化文件夹
        npm init -y
 
    3、局部安装 webpack
        npm install --save-dev [email protected]
 
    4、创建 srcdist 文件夹,
 
    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 [email protected]
 
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>

 

 

以上是关于webpack打包的主要内容,如果未能解决你的问题,请参考以下文章

webpack打包原理

手把手教你打包代码----webpack

webpack: 简单分析 webpack 打包后的代码

webpack 如何配置 CSS抽取 和 打包压缩

webpack中实时打包

实现webpack的实时打包构建