ToB企服应用市场:ToB评测及商务社交产业平台

标题: Webpack的使用 [打印本页]

---

作者: 尚未崩坏    时间: 2022-6-19 02:27
标题: Webpack的使用

• 简介
  
  
  
  • Webpack是一个其那段资源加载/打包工具，它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源
    
  
  
• 作用
  
  
  
  • 可以将多种静态资源js、css、less转换成一个静态文件，减少了页面的请求
    
  
  
• 使用方式
  
  
  
  • 全局安装Webpack（尽量在项目目录中执行cmd命令）
    1. npm install -g webpack webpack-cli

    复制代码
  • 在项目目录的js目录中创建几个js文件（之间的关联任意）。例如common.js、index.js、about.js、main.js(入口js文件)等等
    
  • 打包（只打包js文件）
    
    
    
    • 在项目根目录中创建配置文件webpack.config.js（文件名最好固定，内容结构固定）
      1. // Node.js内置模块
      2. const path = require("path");
      3. module.exports = {
      4.   // 配置入口文件
      5.   entry: "./src/assets/js/main.js",
      6.   output: {
      7.     // 输出路径，__dirname：当前文件所在路径，最好事先创建好
      8.     path: path.resolve(__dirname, "./dist"),
      9.     // 输出文件
      10.     filename: "bundle.js"
      11.   }
      12. }

      复制代码
    • 命令行执行编译命令
      
      
      
      • cmd窗口执行
        1. webpack   # 这个会有警告信息
        2. 或者
        3. webpack --mode=development    # 这个没有警告信息

        复制代码
      
      
    • 完成js文件的打包
      
    
    
  • 同样在项目目录的css目录中创建几个css文件，然后在main.js(入口js文件)引入css文件
    
  • 安装css加载工具
    1. npm install --save-dev style-loader css-loader

    复制代码
  • 上面的webpack.config.js配置文件中添加内容（和output键同级）
    1. module: {
    2.   rules: [
    3.     {
    4.       // 打包规则应用到以css结尾的文件上
    5.       test: /\.css$/,
    6.       use: ['style-loader', 'css-loader']
    7.     }
    8.   ]
    9. }

    复制代码
  • 打包执行同样的命令即可
    
  
  

来源：https://www.cnblogs.com/aitiknowledge/p/15933259.html
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4