精选文章 webpack--基础

webpack--基础

作者:冰魂破 时间: 2020-07-27 11:04:22
冰魂破 2020-07-27 11:04:22

webpack

本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle

entry

入口起点(entry point)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。

可以通过在 webpack 配置中配置 entry 属性,来指定一个入口起点(或多个入口起点)。默认值为 ./src

单入口

{
    // 入口文件
    main: './src/index.js'
}

多入口

1.输入为一个数组,但是入口文件最终只会形成一个chunk,输出出去只有一个bundle文件。

module.exports = {
    entry: ['./src/index.js','./src/add.js']
}

2.输入为对象,有几个入口文件就形成几个chunk,输出几个bundle1文件

module.exports = {
    entry: {
        index: './src/index.js',
        add: './src/add.js',
    }
}

动态入口

输入为一个函数(同步或异步),用于动态的返回上面所需的入口内容。

module.exports = {
    entry: () => new Promise((resolve) => resolve(['./src/index.js','./src/add.js']))
}

 

output

指示webpack如何去输出、以及在哪里输出你的bundle、asset 和其他你所打包或使用 webpack载入的任何内容。

{
    // 打包后的js文件
	filename: 'bundle.js',
    // 路径, 需要使用path的resolve转化为绝对路径
    path: path.resolve(__dirname, "dist")
}

 

Loader

webpack只能理解JavaScript和JSON文件,通过loader让webpack能够去处理其它类型的文件,并将它们转换为有效 模块,以供应用程序使用,以及被添加到依赖图中。

处理非js文件的预处理器,可以打包非js的静态文件  

如果有非js文件的,需要指定规则,告诉webpack需要加载什么loader去处理

从下到上加载loader

 file-loader

module: {
    result: [{
        以.png结尾的文件
        test: /\.png$/,
        use: {
        	// 将文件发送到输出文件夹,并返回(相对)URL
        	loader: 'file-loader'
    	}
    }]
  }

    url-loader

  • 可以将文件打包成base64格式进js文件中
  • url-loader可以实现file-loader的功能
  • 对于图片资源来说,主要可以分为html中图片和非html中图片。对于url-loader或file-loader能够处理js、css等中的图片资源,但是不能直接处理html中的图片资源,所以需要引用html-loader,负责引入img,从而能被url-loader进行处理。

module: {
    rules: [
        {
            test: /\.(png|jpg|gif)$/,
            loader: 'url-loader',
            options: {
                limit: 8 * 1024,
                name: '[hash:10].[ext]',
                outputPath: 'asset/images'
            }
        },
        {
            test: /\.html/,
            loader: 'html-loader',
        },
    ]
}  

 

postcss-loader

对于css和less这样的样式资源,webpack不能直接进行处理,所以需要经过webpack翻译后才可以使用。此外不同浏览器对CSS的支持不同,为了CSS解决兼容性问题,可借助postcss-loader进行处理。

配置 postcss-loader 时,可以在 webpack.config.js 中配置具体选项,也可以新建一个 postcss.config.js,专门定义 postcss-loader 的配置。

autoprefixerpostcss-loader的一个插件

如果直接在 webpack.config.js 中配置:

{
  test: /\.css$/,
  use: [
    'style-loader',
    'css-loader',
    {
      loader: 'postcss-loader',
      options: {
        plugins: [
          require('autoprefixer')
        ]
      }
    }
  ]
}

 

css-loader style-loader

css-loaderstyle-loader需要在一起使用

module: {
    rules: [{
        test: '/\.scss$/',
        use: [
            'style-loader',
            {
                loader: 'css-loader',
                option: {
                    // 这个参数的作用是当解析一个css文件的时候,css文件里面引入了一个scss文件,解析的顺序是从下往上的,再次解析scss文件的时候,前面的sass-loader就不会解析了,因此这个参数的作用就是让引入的文件全部从最开始进行解析
                    importLoaders: 2,
                    // 以模块块的形式引入css,就不会造成css样式的冲突
                    modules: true
                }
            },
            'sass-loader',
            'postcss-loader'
        ]
    }]
}

 

plugin

 HtmlWebpackPlugin

HtmlWebpackPlugin打包之后回自动生成一个html文件,并且将打包后的js文件自动引入到html文件中

plugins: [new HtmlWebpackPlugin({
	template: './src/index.html',        // template可以指定文件的模板来进行构建
})]

 

 CleanWebpackPlugin

打包之前移除之前的打包文件

const { CleanWebpackPlugin } = require('clean-webpck-plugin')
plugins: [
	new CleanWebpackPlugin()
]

 

勿删,copyright占位
分享文章到微博
分享文章到朋友圈

上一篇:JS常用数据处理方法

下一篇:java大数据处理总结

您可能感兴趣

  • SpringMVC框架的入门学习01

    SpringMVC的基本概念 关于三层架构和MVC 三层架构 我们的开发架构一般都是基于两种形式,一种是 C/S 架构,也就是客户端/服务器,另一种是 B/S 架构,也就是浏览器服务器。在 JavaEE 开发中,几乎全都是基于 B/S架构的开发。那么在 B/S架构中,系统标准的三层架构包括:表现层、业务层、持久层。三层架构在我们的实际开发中使用的非常多,所以很多案例也都是基于三层架构设计的。...

  • .NET Core:通过Web API进行微服务交互

    目录 介绍 命名协议 MicroCommerce应用程序结构 MicroCommerce应用开发 1.接口项目,微服务接口和模型类 2. ProductCatalog项目 3. ShoppingCart项目 4. ActivityLogger项目 5. WebUI项目,用户界面 6.关于通用功能的几句话 应用测试 结论 缺点 下载源代码26.3 KB 介绍 几乎所有在.NET Core中使用...

  • 学习HTML5大前端可以从事哪些工作?

      近几年,随着互联网技术的日渐成熟,越来越多的年轻人想往互联网行业发展,就单纯的HTML5大前端网页设计师这一岗位就吸引了无数人。虽然HTML5大前端网页设计门槛相对较低,但是薪资却很高。当然,除了HTML5大前端网页设计外,还有其他的岗位可供选择。今天就让千锋为大家分享一下学习HTML5大前端可以从事的工作有哪些?希望对大家选择相应岗位有所帮助。   一、HTML5开发工程师   HTM...

  • 零基础学习HTML5前端提升攻略!

      学习一门技术,为未来蓄积能量。那么我们可以学习的技术有哪些呢?当然每个人的兴趣点不一样,选择的方向也就不同,今天,我们就为零基础的小白提供学习HTML5大前端提升攻略。   首先,应该重视基础的重要性。无论做什么事情都一定要有扎实的基础,学习HTML5大前端也不例外。只有基础牢固,才能更深入的学习新技术、新知识。HTML5大前端的入门门槛很低,与其他语言先慢后快的学习节奏相比,它是一个先...

  • Linux  用户和权限之用户相关文件 

    目录 用户相关文件 /etc/passwd 用户信息文件 /etc/shadow 影子文件 /etc/group 组信息文件 用户相关文件 /etc/passwd 用户信息文件 vi /etc/passwd root:x:0:0:root:/root:/bin/bash 第一列: 用户名 第二列: 密码位 第三列: 用户 ID 0 超级用户 UID。如果用户 UID 为 0,代表这个账号是管...

  • 2020B证(安全员)考试及B证(安全员)模拟考试题库

    题库来源:安全生产模拟考试一点通公众号小程序 2020B证(安全员)考试及B证(安全员)模拟考试题库,包含B证(安全员)考试答案解析及B证(安全员)模拟考试题库练习。由安全生产模拟考试一点通公众号结合国家B证(安全员)考试最新大纲及B证(安全员)考试真题出具,有助于B证(安全员)考试软件考前练习。 1、【单选题】多台挖掘机在同一作用面机械开挖,挖掘机间距应大于( )。( B ) A、5m B...

  • 读书笔记_mysql必知必会_28_访问控制

    目录 访问控制 管理用户 创建用户账号 删除用户账号 设置访问权限 更改口令 访问控制 MySQL 服务器的安全基础是: 用户应该对他们需要的数据具有适当的访问权,既不能多也不能少 。换句话说,用户不能对过多的数据具有过多的访问权。 考虑以下内容:  多数用户只需要对表进行读和写,但少数用户甚至需要能创建和 删除表;  某些用户需要读表,但可能不需要更新表;  你可能想允许用户添加数据...

  • Java设计模式 - 模板模式

    目录 模板模式: 模板优点: 模板模式应用: 模板模式和策略模式区别: 模板实例: 上述代码 GitHub 地址:https://github.com/baicun/designPatterns 模板模式: 封装了一个算法步骤,并允许子类为一个或多个步骤方法提供实现 模板优点: 抽取公共代码模板在超类中实现,方便维护和阅读。 模板模式应用: Android的BaseAdapter 模板模式和...

华为云40多款云服务产品0元试用活动

免费套餐,马上领取!
CSDN

CSDN

中国开发者社区CSDN (Chinese Software Developer Network) 创立于1999年,致力为中国开发者提供知识传播、在线学习、职业发展等全生命周期服务。