欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

1.webpack基础

程序员文章站 2022-05-30 21:17:54
...

(一) 为什么要使用webpack

1、什么是Webpack
WebPack是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。

2.为什要使用WebPack,WebPack和Grunt以及Gulp相比有什么特性

首先,Grunt和Gulp只能将一些CSS和JS文件分别压缩合并成单个文件,当然也具有一些编译功能,比如Less和Sass的编译、ES6到ES5的编译等等。但是Webpack不仅具有它们所具备的这些编译压缩合并功能,同时还具备模块化开发和组件式开发等优点,在目前流行的前端框架React和Vue中也得到很好的支持

(二) 模块引入方式

下面的模块引入引出方式webpack都 可以识别。
https://www.webpackjs.com/api/module-methods/#es6-%E6%8E%A8%E8%8D%90-

[1]. ES6 Module模块引入方式

//导出模块
//写法1
const add = function(a,b) {return a+b}
export { add }
//写法2
export { add: function (a,b) {return a+b} }
//默认导出
export default function(a,b) {return a+b}
//混合写法
export const add = function(a,b) {return a+b}
//导入模块
//命名式 需要有大括号
import { add } from './add.js'
// 默认导入 等同于 import { default as myAdd } from './add.js'
import myAdd from './add.js'
//混合导入
import add, {name} from './add.js'
//全部导入
import * as add from './add.js' 

[2]. CommonJS模块引入方式

//导出模块
module.exports = {
   name: 'jack',
   add: function(a, b){return a+b}
}
// 导入模块
const sum = require('./add.js')
console.log(sum(2,3)) // 5

(三) 安装webpack

[1]. 安装node.js

安装完成后在控制台中使用下面代码,如果显示出来版本号,说明安装成功

node -v

[2]. 配置项目信息

  • 在node开发中使用npm init会生成一个pakeage.json文件,这个文件主要是用来记录这个项目的详细信息的,它会将我们在项目开发中所要用到的包,以及项目的详细信息等记录在这个项目中。

  • 在控制台中,进入到项目根目录下中执行

    # 也可以使用npm init -y 
    npm init 
    

[3]. 安装webpack

  • 全局安装(不推荐):在控制台中输入
    不推荐的原因:当有两个项目使用不同版本的webpack时就会出现因为版本不同造成程序出错
    npm install webpack webpack-cli -g
    
  • 局部安装(在项目中安装):在控制台中进入到项目的根目录,执行如下代码
    # --save-dev可以用 -D替换
    # npm install [email protected] webpack-cli -D 指定版本号
    npm install webpack webpack-cli --save-dev
    

[4]. 卸载webpack

npm uninstall webpack webpack-cli -g

[5]. 查看webpack版本号

查看全局的webpack版本号

npm webpack -v

查看项目下安装的webpack版本号

npx webpack -v

[6]. npx 和 npm的区别

npm是一个node package安装工具。
npx的作用是先检查本地有没有安装某个package,如果没有去远程registry找,找到的话直接使用,不用下载到本地node-modules包里面,这样就能优化本地项目的大小,也可以避免安装package到全局。

(四) webpack配置文件

https://blog.csdn.net/kouzuhuai2956/article/details/106119674
webpack有自己默认的配置文件,当不想使用默认的配置文件时,可以使用如下方法改变配置项。

[1]. 使用默认的配置文件名进行打包

需要在项目的根目录下新建一个webpack.config.js文件来配置自己的webpack,覆盖掉默认的webpack 的配置文件。
webpack.config.js文件

const path = require('path');
//commonJS导出文件
module.exports = {
	//打包的模式:production(生产模式,默认),development(开发模式)
	mode: 'production',
    //项目入口(从哪个文件开始打包)
    entry: './index.js',
    //打包好的文件的相关配置
    output: {
        //打包出的文件名
        filename: 'bundle.js',
        //打包出的文件放置的位置(绝对路径)
        path: path.resolve(__dirname, 'bundle'),
    }
}

使用如下命令进行打包

npx webpack

[2]. 使用自定义的配置文件名来打包文件

webpackconfig.js文件中配置好webpack配置文件后,使用如下命令进行打包。

npx webpack --config webpackconfig.js