1、安装webpack

1.全局安装webpack:npm install webpack -g 或者转化了cnpm则将npm改为cnpm进行安装

2.进行初始化建立package.json文件记录插件,命令行:npm init

3.webpack安装到项目并将写入package.json的devDependencies中,

命令行:npm install webpack --save-dev。

2、webpack配置文件介绍

1.webpack需要配置文件webpack.config.js,手动的创建于项目根目录中就ok。一个项目可以设置多个配置文件,每个都可以有不同的功能。

2.webpack的配置文件,格式如下:

    module.exports = {
      //配置开始。主体
    }

3.常用配置项简单说明

entry:打包的入口文件,它可以是一个字符串或者一个对象。

output:配置打包的输出结果,为一个对象。

fileName:定义输出文件名,为一个字符串。

path:定义输出文件路径,为一个字符串。

module:定义对模块的处理逻辑,为一个对象。

loaders:定义一系列的加载器,为一个数组。 

 [
          {
            test:正则表达式,用于匹配到的文件
            loader/loaders:字符串或者数组,处理匹配到的文件。               
           //loader:string:只需要用到一个模块加载器
           //loaders:array:要使用多个模块加载器
            include:字符串或者数组,指包含的文件夹
            exclude:字符串或者数组,指排除的文件夹
          }
        ]    

resolve:影响对模块的解析,为一个对象

extensions:自动补全识别后缀,为一个数组

plugins:定义插件,为一个数组

4.entry的详细说明

1)当entry是一个字符串时,这个字符串表示需要打包的模块的路径,如果只有一个要打包的模块,可以使用这种形式

2)当entry是一个对象

a.是数组时,如果需要将多个模块打包成一个模块,可以使用这个方式。如果这些模块之间不存在依赖,数组中值的顺序没有要求,如果存在依赖,则要将依赖性最高的模块放在最后面。

例如:entry:["./dome/one.js",".dome/two.js"]      

b.是键值对形式的对象是,当需要分别打包成多个模块时,可以使用这种方式,例:

entry:{
        module1:"./dome/one.js",
        module2:["./dome/two.js","./dome/three.js"]      }

注:当entry是一个键值对形式的对象时,包名就是键名,output的filename不能是一个固定的值,因为每个包的名字不能一样

5.output详细说明

1)output是一个对象

2)output.filename:指定输出文件名,一个字符串。当输出一个文件,output.filename为一个确定的字符串

如:

output:{
          filename:"build.js"
            }

当输出多个文件,output.filename不能为一个确定的字符串。为了让每个文件有一个唯一的名字,需要用到下面的变量

如:

output:{
          path:'./build/',
          fialname:'[name]_bundle.js'
        }

(3)output.path:指定输出文件的路径,相对路径,为一个字符串

6.module.loaders详细说明

1)module是一个对象,定义对模块的处理逻辑

2)module.loaders是一个数组,定义一系列加载器,这个数组中的每一项都是一个对象

3)

module.loaders:[
        {
          test:正则表达式,用于匹配到的文件
          loader/loaders:字符串或者数组,处理匹配到的文件。               
         //loader:string:只需要用到一个模块加载器
         //loaders:array:要使用多个模块加载器
          include:字符串或者数组,指包含的文件夹
          exclude:字符串或者数组,指排除的文件夹
        }
      ]  
  

(4)module除了可以配置loaders以外还能配置其他的值.更详细请移步webpack官网

7.resolve.extensions详细说明

1)resolve.extensions并不是必须配置的,当不配置时,会使用默认值["", ".webpack.js", ".web.js", ".js"],当手动为resolve.extensions设置值,它的默认值会被覆盖

2)如果你想要每个模块都能够按照它们自己扩展名正确的被解析,要在数组中添加一个空字符串。

3)如果你想请求一个js文件但是在请求时不带扩展(如:require('somecode')),那么就需要将'.js'添加到数组中。其他文件一样

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持Devmax!

webpack配置文件和常用配置项介绍的更多相关文章

  1. 详解如何使用webpack+es6开发angular1.x

    本篇文章主要介绍了详解如何使用webpack+es6开发angular1.x,具有一定的参考价值,有兴趣的可以了解一下

  2. JavaScript中Webpack的使用教程

    Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源,这篇文章主要介绍了JavaScript中Webpack的使用,需要的朋友可以参考下

  3. React+Webpack快速上手指南(小结)

    这篇文章主要介绍了React+Webpack快速上手指南(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  4. Yii2语言国际化自动配置详解

    这篇文章主要介绍了Yii2语言国际化自动配置详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  5. SpringMVC静态资源配置过程详解

    在javaweb项目中配置了DispatcherServlet的情况下,如果不进行额外配置的话,几乎所有的请求都会走这个servlet来处理,默认静态资源按路径是访问不到的会报404错误,下面就来讲一讲如何配置才能访问到静态资源吧

  6. 关于@RequestLine的使用及配置

    这篇文章主要介绍了关于@RequestLine的使用及配置方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  7. 详解Webpack+Babel+React开发环境的搭建的方法步骤

    本篇文章主要介绍了详解Webpack+Babel+React开发环境的搭建的方法步骤,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  8. SpringBoot配置拦截器实现过程详解

    在系统中经常需要在处理用户请求之前和之后执行一些行为,例如检测用户的权限,或者将请求的信息记录到日志中,即平时所说的"权限检测"及"日志记录",下面这篇文章主要给大家介绍了关于在SpringBoot项目中整合拦截器的相关资料,需要的朋友可以参考下

  9. SpringBoot浅析安全管理之Spring Security配置

    安全管理是软件系统必不可少的的功能。根据经典的“墨菲定律”——凡是可能,总会发生。如果系统存在安全隐患,最终必然会出现问题,这篇文章主要介绍了SpringBoot安全管理Spring Security基本配置

  10. Vue如何实现多页面配置以及打包方式

    这篇文章主要介绍了Vue如何实现多页面配置以及打包方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

随机推荐

  1. Error: Cannot find module ‘node:util‘问题解决

    控制台 安装 Vue-Cli 最后一步出现 Error: Cannot find module 'node:util' 问题解决方案1.问题C:\Windows\System32>cnpm install -g @vue/cli@4.0.3internal/modules/cjs/loader.js:638 throw err; &nbs

  2. yarn的安装和使用(全网最详细)

    一、yarn的简介:Yarn是facebook发布的一款取代npm的包管理工具。二、yarn的特点:速度超快。Yarn 缓存了每个下载过的包,所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率,因此安装速度更快。超级安全。在执行代码之前,Yarn 会通过算法校验每个安装包的完整性。超级可靠。使用详细、简洁的锁文件格式和明确的安装算法,Yarn 能够保证在不同系统上无差异的工作。三、y

  3. 前端环境 本机可切换node多版本 问题源头是node使用的高版本

    前言投降投降 重头再来 重装环境 也就分分钟的事 偏要折腾 这下好了1天了 还没折腾出来问题的源头是node 使用的高版本 方案那就用 本机可切换多版本最终问题是因为nodejs的版本太高,导致的node-sass不兼容问题,我的node是v16.14.0的版本,项目中用了"node-sass": "^4.7.2"版本,无法匹配当前的node版本根据文章的提

  4. nodejs模块学习之connect解析

    这篇文章主要介绍了nodejs模块学习之connect解析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  5. nodejs npm package.json中文文档

    这篇文章主要介绍了nodejs npm package.json中文文档,本文档中描述的很多行为都受npm-config(7)的影响,需要的朋友可以参考下

  6. 详解koa2学习中使用 async 、await、promise解决异步的问题

    这篇文章主要介绍了详解koa2学习中使用 async 、await、promise解决异步的问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  7. Node.js编写爬虫的基本思路及抓取百度图片的实例分享

    这篇文章主要介绍了Node.js编写爬虫的基本思路及抓取百度图片的实例分享,其中作者提到了需要特别注意GBK转码的转码问题,需要的朋友可以参考下

  8. CentOS 8.2服务器上安装最新版Node.js的方法

    这篇文章主要介绍了CentOS 8.2服务器上安装最新版Node.js的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  9. node.js三个步骤实现一个服务器及Express包使用

    这篇文章主要介绍了node.js三个步骤实现一个服务器及Express包使用,文章通过新建一个文件展开全文内容,具有一定的参考价值,需要的小伙伴可以参考一下

  10. node下使用UglifyJS压缩合并JS文件的方法

    下面小编就为大家分享一篇node下使用UglifyJS压缩合并JS文件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

返回
顶部