webpack安装与核心概念

  • 安装webpack
  • webpack核心概念:入口、输出、加载器、插件、模块、模式

一、安装webpack

1.安装webpack之前需要安装nodejs环境,在使用nodejs环境自带的包管理工具npm进行下载,由于网络环境问题,建议安装先安装淘宝的镜像cnpm来实现下载。

npm install webpack -g

由于webpack从3版本升级到4版本,拆分了命令行接口webpack-cli,所以这时候你直接使用webpack会报错,还需要下载安装一个webpack-cli,再使用webpack。

npm install webpack-cli -g

然后就可以开始再你的工作区间使用webpack了,需要注意的是在你的工具区间内必须要有src文件夹,并且在文件下面有个index.js文件,这是针对无配置的测试情况,有配置的大神跳过。

webpack

通过webpack打包后会在工具区间下生成一个文件夹dist,并且文件夹下有一个main.js,这个main.js是由webpack打包生成的,在HTML结构文件中引入这个main.js测试你的代码。

2.在webpack中默认支持ES6模块化和Commonjs模块化,并且可以同时混合使用。看下面示例:(同时演示通过webpack指定打包文件且指定打包到某个文件)

使用ES6的模块化定义一个sum.js

export default function sum(a,b){
    return a + b;
}

使用Commonjs模块化定义一个minus.js

module.exports = function(a,b){
    return a - b;
}

在demo.js主入口文件引入这两个模块,并使用模块的功能:

import sum from ‘./sum‘;
var minus = require(‘./minus‘);
console.log(sum(2,4),minus(4,2));

然后通过webpack将demo.js打包到bundle.js文件中:

webpack demo.js -o bundle.js

再在demo.html结构文件中引入打包后的bundle.js文件。

<script src="./bundle.js"></script>

打开demo.html文件,查看控制台,操作成功的话会打印出:6 2

3.为了更方便管理项目,除了在全局安装webpack以外有必要在当前项目的工作区间上安装一个局部的webpack,一是可能全局的webpack的版本可能与全局的版本不同,而是可以更好的管理插件。

//下载安装局部的webpack----(--save-dev可以简写成-D)
cnpm install webpack --save-dev

下载安装完成以后在工作区间下可以看到生成了一个node_modules文件夹,还有生成一个package.json文件。node_nodules文件夹里面是webpack依赖的包,package.json则是记录当前工作区间都安装了哪些包,第一次安装在这个文件里只记录了webpack的信息,如:

{
  "devDependencies": {
    "webpack": "^4.35.0"
  }
}

比如再在当前工作区间上安装一个jquery:

cnpm install jquery -D

package.json的记录多出了一个jquery的信息,实际jquery包被存到了node_modules文件夹下:

{
  "devDependencies": {
    "jquery": "^3.4.1",
    "webpack": "^4.35.0"
  }
}

这个package.json文件有什么作用呢?除了可以查看项目依赖的包以外,还有当你要迁移你的工作区间或者向同事拷贝一个正在进行开发维护的项目时,并不需要将node_modules的包拷贝给他,只需要将这个package.json文件拷贝一份即可,拿到这个package.json后在新的工作区间上执行以下指令,就可以将package.json文件中记录的所有依赖包前部下载到当前工作区间上:

npm install

二、webpack核心概念

  • 入口(entry)
  • 输出(output)
  • 加载器(loader)
  • 插件(plugins)
  • 模式(mode)
  • 模块

webpack中文文档

首先,在工作区间创建一个后缀为.config.js的配置文件,这个配置文件用来配置入口、输出、加载器、插件、模块、模式。意思就是由这个配置文件告诉webpack从那个文件开始打包操作,打包到那个文件,非JS文件如何编译转码等操作,当打包JS文件时遇到需要依赖的模块时根据配置的模块信息进行打包操作,是按照开发模式还是按照生产模式打包。这个配置文件都将为你自动完成这些操作。注意.config.js配置文件遵循Commonjs规范。

入口(entry)

2.1.1在config.js配置文件中配置单入口文件:在配置模块中定义entry属性,然后将入口文件路径以字符串的方式传入,注意这里需要文件后缀。

module.exports = {
    entry:‘./src/index.js‘
}

2.1.2在config.js配置文件中配置多个入口文件:entry属性这时候就要写成对象值了,然后给每个入口文件定义一个名称作为该对象的属性名,然后将对应的入口文件路径作为属性值给该属性。

1 module.exports = {
2     entry:{
3         index:‘./src/index.js‘,
4         app:‘./src/app.js‘
5     }
6 }

输出(output)

2.2.1在config.js配置输出文件信息:在配置模块中定义output属性,并给这个属性赋值一个对象,对象中有两个属性分别是path和filename,path用来设置文件输出路径,filename用来设置文件名。

var path = require(‘path‘);
module.exports = {
    output:{
        path:path.resolve(__dirname,‘dist‘),
        filename:‘bundle.js‘
    }
}

注意path属性的配置,path.resolve(__dirname,‘dist‘)的意思就是在path这个变量上找到当前路径下的‘dist’文件夹,如果当前文件夹下没有‘dist’文件夹就会自动创建‘dist’文件夹。path本身是一个node环境模块,所以需要引入这个模块,然后在调用path的resolve()方法获取当前模块下指定的文件夹,这个方法会返回该文件夹的绝对路径。交给webpack用来操作输出文件。

所以,这个输出的意思就是将打包好的文件存储到当前工作环境下的dist文件夹下,并设置这个打包好的文件名称为bundle.js。

2.2.2有了入口文件的的配置模式,必然输出也就需要针对这种多入口文件对应的输出多个打包文件,所以文件名肯定不能像上面一样写死,看示例怎么解决的:

1 var path = require(‘path‘);
2 module.exports = {
3     output:{
4         path:path.resolve(__dirname,‘dist‘),
5         filename:‘[name].bundle.js‘
6     }
7 }

在固定的文件名称前面加上一个块[name],设置为动态命名,这个那么就是入口文件路径对应属性名的名称。

加载器(loader)

我们知道,less是不能直接作用在HTML文件上的,在webpack打包过程中可以直接通过加载器将less转换成css文件,甚至直接转换编译成行间样式,这时候就需要用到加载器。当然加载器不只是为了实现less的转换,还能处理各种不能直接被浏览器使用的文件格式的文件,比如TypeScript。

先通过转换less文件来了解加载器:

1 module.exports = {
2     module:{
3         rules:[
4             {test: /\.less$/,use:[‘style-loader‘,‘css-loader‘,‘less-loader‘]}
5         ]
6     }
7 }

在配置文件中添加对象属性module,然后在module中添加对象属性rules,然后将各种需要解析的文件以及解析这个文件格式的loader以键值对的方式添加进去。文件类型用test表示,然后再以正则表达式的方式匹配文件后缀作为test的值;use则用来表示需要的加载器,加载器的值可以是一个字符串(执行单个加载器),也可以是一个数组(多个加载器迭代加载),多个加载器迭代加载的方式是从后向前进行迭代加载。

要注意的是这些加载器是需要下载的,然后还要再主入口文件中使用模块化依赖对应文件,不然webpack没办法追踪到对应的文件。

cnpm install style-loader less-loader css-loader less --save-dev

在主入口文件中依赖对应的文件:

import ‘./src/demo.less‘;

插件(plugins)

关于插件这部分不太可能在这里解释清楚,可以理解为扩展webpack的功能。其实webpack自带的加载器loader也是建立在系统的plugins基础之上的,既然是外部的扩展功能那就要先引入,然后再在配置中配置。实际上却是是这样的,我们通过扩展一个html-webpack-plugin插件来示范以下,这里不具体介绍这个插件的用途,后面会有具体剖析插件的博客来解析:

var HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
module.exports = {
    plugins: [
        new HtmlWebpackPlugin()
    ]
}

然后我再次执行webpack打包,如果正常的完成打包的话会在dist文件夹下出现一个index.html文件,但是我在打包环节出现了以下小错误:

Error: Cannot find module ‘webpack/lib/node/NodeTemplatePlugin‘
具体在这里不解释这个错误的原因了,我在控制台中执行了这行命令解决了这个错误:

npm link webpack --save-dev

用cnpm也是可以的,然后再次执行顺利打包,dist文件夹出现了index.html文件。

模式(mode)

2.5.1模式是用来控制打包模式的,所谓打包模式通常被称为生产模式和开发模式,两者的区别就是生产模式是压缩版本代码,不方便测试,因为如果使用压缩代码测试的话,如果出现异常情况报错都是在第一行,不方便debug。在webpack中如果没有设置模式就会默认为生产模式,打包后的代码是经过压缩的。

module.exports = {
    mode:‘production‘//生产模式
    mode:‘development‘//开发模式
}

这个代码你别两个都复制了,我是为了展示这两个模式的设置方式把两个模式都写入了示例。在实际开发时我们一般会需要两个配置文件,一个用于开发打包,一个用于生产打包,在控制台执行打包时采用指定的配置文件打包。

原文地址:https://www.cnblogs.com/ZheOneAndOnly/p/11080132.html

时间: 2024-11-10 07:39:35

webpack安装与核心概念的相关文章

ElasticSearch笔记整理(二):CURL操作、ES插件、集群安装与核心概念

[TOC] CURL操作 CURL简介 curl是利用URL语法在命令行方式下工作的开源文件传输工具,使用curl可以简单实现常见的get/post请求.简单的认为是可以在命令行下面访问url的一个工具.在centos的默认库里面是有curl工具的,如果没有请yum安装即可. curl -X 指定http的请求方法 有HEAD GET POST PUT DELETE -d 指定要传输的数据 -H 指定http请求头信息 curl创建索引库 curl -XPUT http://<ip>:9200

webpack核心概念

一.webpack四个核心概念 1.入口[Entry] webpack将创建所有应用程序 依赖关系图表.图表的起点被称之为 入口起点.入口起点告诉webpack从哪里开始,并遵循着依赖关系图表知道打包什么.可以将您的应用入口起点认为是跟上下文或app的第一个启动文件. const config = { entry: { app: './src/app.js' } } module.exports = config; 2.出口[Output] 将所有资源打包在一起,仍然告诉webpack在哪里打包

第二章 Docker的核心概念和安装

2.1核心概念 Docker镜像(Image)类似于虚拟机镜像,可以将它理解为一个面向Docker引擎的只读模板,包含了文件系统. 2.2安装Docker Docker支持在主流的操作系统平台上使用,包括Ubuntu.CentOS.Windows以及MacOS系统等.这里我们重点介绍在CenOS系统下如何安装Docker.如何启动Docker. CentOS Docker支持CentOS6及以后的版本. 对于CentOS6系统可使用EPEL库安装Docker,命令如下: $ sudo yum i

ElasticSearch学习笔记-01 简介、安装、配置与核心概念

一.简介 ElasticSearch是一个基于Lucene构建的开源,分布式,RESTful搜索引擎.设计用于云计算中,能够达到实时搜索,稳定,可靠,快速,安装使用方便.支持通过HTTP使用JSON进行数据索引. Lucene只是一个框架,要利用它的功能,需要使用JAVA,并且在程序中集成Lucene.更糟的是,Lucene非常复杂,需要做很多的学习了解,才能明白它是如何运行的. Elasticsearch使用Lucene作为内部引擎,但是在使用它做全文搜索时,只需要使用统一开发好的API即可,

docker的核心概念和安装

docker的安装和配置 环境介绍: 操作系统:64bit CentOS7 docker版本:1.11.1(最新版本) 版本新功能:https://github.com/docker/docker/blob/master/CHANGELOG.md 安装步骤 安装准备: 要求: 内核版本最低为3.10 查看当前内核版本: uname –r 通过yum方式安装docker: 第一步:更新yum源: sudo yum update 第二步:增加docker的yum源: 输入命令:sudo tee /e

Docker 核心概念、安装、端口映射及常用操作命令,详细到令人发指。

Docker简介 Docker是开源应用容器引擎,轻量级容器技术. 基于Go语言,并遵循Apache2.0协议开源 Docker可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然后发布到任何流行的Linux系统上,也可以实现虚拟化 容器完全使用沙箱技术,相互之间不会有任何接口 类似于虚拟机技术(vmware.vitural),但docker直接运行在操作系统(Linux)上,而不是运行在虚拟机中,速度快,性能开销极低 白话文,简介就是: Docker支持将软件编译成一个镜像,然

[docker] 02 CentOS安装docker(包含失败),安装命令简介,以及docker核心概念

主要内容: 一.安装docker(包含卸载重新安装) 二.配置docker服务 三.安装命令简介 四.docker核心概念 一.安装docker 1.1. 通过uname -r查看系统版本,为什么要查看系统版本呢?因为docker对CentOS有以下要求: a. CentOS 7及以后的版本 b. 64位操作系统 c. 内核版本至少3.10 1.2. 支持devicemapper存储类型 sudo yum update sudo yum install -y device-mapper-pers

Maven的几个核心概念

POM (Project Object Model) 一个项目所有的配置都放置在 POM 文件中:定义项目的类型.名字,管理依赖关系,定制插件的行为等等.比如说,你可以配置 compiler 插件让它使用 java 1.5 来编译. 示例的 POM: <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  

理解maven的核心概念

原文链接:http://www.cnblogs.com/holbrook/archive/2012/12/24/2830519.html 好久没进行java方面的开发了,最近又完成了一个java相关的任务,顺便重新体会了 maven 这一利器. 在使用过程中发现以前对maven的理解不够深入,借此机会重新梳理了一下maven的核心概念.相信理解了这些核心概念, 即使长时间不使用,以后再重新上手也会非常容易. 本文以类图的方式,介绍maven核心的12个概念以及相互之间的关系. Table of