第一部分、webpack基本使用

最新推荐文章于 2024-06-03 09:51:03 发布

Tmil

最新推荐文章于 2024-06-03 09:51:03 发布

阅读量497

点赞数

分类专栏： webpack 文章标签： webpack 前端

本文链接：https://blog.csdn.net/qq_46067727/article/details/127715659

版权

Webpack本身功能有限：开发模式仅能编译JS中的ES module语法，生产模式还能压缩JS代码。所以主要学习如何处理其他资源。

摘要由CSDN通过智能技术生成

打包工具的用途

开发时会使用框架、ES6模块化语法、Less/Sass等CSS预处理器等语法，要想在浏览器运行这些就必须经过编译，此时打包工具就派上了用场。此外，它还可以压缩代码、做兼容性处理、提升代码的性能等。常见的打包工具有Grunt、Gulp、Parcel、Webpack、Rollup、Vite……

介绍

Webpack是一个静态资源打包工具，它会以一个或多个文件作为打包的入口，将整个项目所有文件编译组合成一个或多个文件输出出去，输出的文件就是编译好的文件，就可以在浏览器运行了。我们将Webpack输出的文件叫做bundle。

Webpack本身功能有限：开发模式仅能编译JS中的ES module语法，生产模式还能压缩JS代码。所以主要学习如何处理其他资源。

基本使用

资源目录

在index.html引入main.js后运行

创建文件

count.js

export default function count(x,y){
  return x-y
}

sum.js

export default function sum(...args){
  return args.reduce((p,c)=>p+c,0)
}

入口文件main.js

import count from ‘./js/count’
import sum from ‘./js/sum’
console.log(count(2,1))
console.log(sum(1,2,3,4))

下载依赖

从项目根目录打开终端，运行 npm init -y ，生成一个基础的包描述文件package.json，注意name字段不能是webpack，否则会报错。

1.下载依赖 npm i webpack webpack-cli -D

2.启用webpack

开发模式 npx webpack ./src/main.js --mode=development

生产模式 npx webpack ./src/main.js --mode=production

npx webpack是用来运行本地安装webpack包的，npx指令会将node_modules下的.bin临时添加为环境变量，就可以访问里面的应用程序；./src/main.js指定Webpack从main.js文件开始打包，不但会打包main.js，还会将其依赖也一起打包进来；--mode=XX指定模式（环境）。

输出文件

Webpack默认会将文件打包输出到dist目录下，我们查看dist目录下文件情况就好了。

5大核心概念

entry（入口）提示Webpack从哪个文件开始打包；output（输出）提示Webpack打包完的文件输出到哪里去、如何命名等；loader（加载器）帮助Webpack解析其他资源；plugins（插件）扩展Webpack的功能；mode（模式）主要有两种：开发模式development、生产模式production

基本配置

在项目根目录新建文件webpack.config.js（Webpack是基于node.js运行的，所以采用Common.js模块化规范），配置后终端直接运行npx webpack就可以。

// node.js核心模块，专门用来处理路径问题
const path=require('path')
module.exports={
    // 入口
    entry:"./src/main.js",
    // 输出
    output:{
        // 文件的输出路径
        // __dirname，node.js的变量，代表当前文件的文件夹目录
        path:path.resolve(__dirname,'dist'),
        //文件名
        filename:'main.js'
    },
    // 加载器
    module:{
        rules:[]
    },
    // 插件
    plugins:[],
    // 模式
    mode:"development"
}