zoukankan      html  css  js  c++  java
  • webpack(2)--webapck自身的配置

    上一记介绍了webpack的安装和基本配置,本记将描述webpack自身的配置

    一:指定webpack入口以及出口目录以及输出文件

    相信读者在看完上一记后会有一点疑惑:为什么运行webpack要配置src,为什么会有构建打包文件时会生成dist目录且里面会有一个main.js呢?

    —mydemo
    ______dist
    ——————__main.js
    ______src
    ——————__index.js
    ——————__common.js
    ——————__esmodule.js
    ——index.html

    这是由于webapck在打包过程中会默认将当前根目录下src/index.js作为入口文件,并会在根目录下新建一个dist目录,并将打包后的文件(默认main.js)放置在dist的目录中

    如何配置入口以及出口目录以及文件 ?

    三种办法:

    1. 命令行
      当前根目录下输入npx webpack --entry 入口目录及指定入口文件 --output-path 出口目录及指定出口目录
    // 入口:yentry.js   出口 ./output
    npx webpack --entry ./src/myentry.js  --output-path ./output
    
    

    缺点:命令行里输入,并不能确保效率
    2. 在package.json中配置
    在webpack中的script字段,给打包命令(如build)配置方法1的代码

    // script字段下
    "scripts":{
      "build" : "webpack  --entry ./src/myentry.js  --output-path ./output "
    }
    

    缺点:scripts内要写太多冗余代码,并不能一眼就看出要做的事情

    3.在webpack.config.js中配置项目入口以及打包的目录文件(推荐)

    webpack.config.js是一个用于webpack配置选项的文件,可以在这里做针对wenpack本身以及loader,plugins的配置。本质上是通过导出一个配置对象,当webpack运行时会优先读取这个文件,如果有就执行这个对象内的配置

    根目录下新建webpack.config.js

    // 由于webpack底层由node支持,因而使用node风格的导出方式(读者也可以尝试使用esmodule方式,但是流程太过繁琐,不推荐)
    //webpack.config.js
    const path = require('path') //引入node原生模块path
    module.exports = {
      entry : './src/main.js'  
      output: {
        path: path.resolve(__dirname,'build'),  //构建完成输出的目录地址(需要绝对路径)
        filename: 'mydemo.js'
      }
    
    }
    

    命令解析:

    entry :入口文件(需附带目录)
    output: 输出目录以及文件配置

    path: 输出的路径,需要绝对路径

    path.resolve : node中path模块的一个方法,用于拼接两个字符串
    __dirname: 从磁盘到当前目录下的绝对路径
    'build' : 构建后的目录名,内部存放打包后的文件
    filename: 打包后的文件(在build内部)

    完成上述配置后,保存再执行一遍npm run build即可

    这样就完成了webpack入口以及出口文件的配置

    二:重命名webpack配置文件

    一定要将webpack.config.js作为webpack的配置文件吗?是否可以重命名?

    可以, 但不推荐,重命名后会增加后续开发者阅读代码难度。因而普遍约定不要重命名webpack.config.js

    重命名webpack.config.js的方法:
    package.json下的script字段的build下输入以下命令:

    // package.json
    "script":{
    "build":"webpack --config renameconfig.js"
    }
    

    下一记:常用loader的安装与配置

    作者:致爱丽丝
    本文版权归作者和博客园共有,欢迎转载,但必须在文章页面给出原文链接并标名原文作者,否则保留追究法律责任的权利。
  • 相关阅读:
    jMeter 里 CSV Data Set Config Sharing Mode 的含义详解
    如何使用 jMeter Parallel Controller
    使用 Chrome 开发者工具 coverage 功能分析 web 应用的渲染阻止资源的执行分布情况
    使用 Chrome 开发者工具的 lighthouse 功能分析 web 应用的性能问题
    关于 SAP 电商云首页加载时触发的 OCC API 请求
    SAP UI5 确保控件 id 全局唯一的实现方法
    SAP 电商云 Accelerator 和 Spartacus UI 的工作机制差异
    介绍一个好用的能让网页变成黑色背景的护眼 Chrome 扩展应用
    Chrome 开发者工具 performance 标签页的用法
    Client Side Cache 和 Server Side Cache 的区别
  • 原文地址:https://www.cnblogs.com/hjk1124/p/14825704.html
Copyright © 2011-2022 走看看