webpack快速使用

简介: webpack快速使用

一、webpack是什么
webpack 是一个用于现代 JavaScript 应用程序的静态模块化打包构建工具

Webpack的运行需要依赖Node.js,因此需要先安装Node.js。
下载地址

查看是否安装成功
// 查看版本
node - v // 例如 :v16.13.1
二、webpack快速使用
2.1 初始化package.json
npm init -y
2.2 安装webpack相关依赖
npm i webpack webpack-cli -D
2.3 写一点点测试代码
src目录下 创建 main.js,tools.js

public目录下 index.html 引入dist/main.js

tools.js

// 随意写的两个方法
module.exports = {
   
    add:function(a,b) {
   
        return a+b
    },
    jian:function(a,b) {
   
        return a-b
    }
}

main.js

// 引入 tools文件
    const tools = require('./tools')
    console.log('tools',tools.add(4,6));
2.4package.json中添加打包脚本
{
   
      ....
      "scripts": {
   
           "build":"webpack"
       },
       ... 
 }

2.5 编写webpack配置文件
编写webpack配置文件,让webpack实现灵活环境定制,如下:

//引入相关依赖
const path=require('path')
//创建一个webpak配置对象
const config = {
   
    // 设置模式
    mode:'development',
    //配置入口
    entry:'./src/main.js',
    //配置出口
    output: {
   
       //打包路径
        path:path.resolve(__dirname,'dist'),  // dist 打包后的文件名
       //打包文件名 
        filename: 'js/bundle.js',
      //清理无用文件
        clean:tru
    }
}

//抛出
 module.exports = config

2.5 安装webpack服务器
安装webpack-dev-server: npm i webpack-dev-server -D
配置webpack.config.js
{
....
//配置webpack服务器
devServer: {
port: 9999, // '9999'自定义
//静态目录位置
static: {
directory:'dist'
}
}
....
}
3.配置package.json运行脚本

{
   
   ...
  "scripts": {
   
    "build": "webpack",
    "serve": "webpack serve"
  },
   ...
}

最后:使用命令打包

npm run build
相关文章
|
5月前
|
缓存 JavaScript
webpack之SplitChunksPlugin
webpack之SplitChunksPlugin
49 0
|
5月前
|
前端开发 JavaScript
webpack使用
webpack使用
|
5月前
|
前端开发 JavaScript Linux
|
5月前
|
JSON JavaScript 前端开发
Webpack详解(二)
Webpack详解
172 0
|
10月前
|
JavaScript 前端开发
webpack
webpack
55 0
webpack
|
5月前
|
前端开发 JavaScript 测试技术
对Webpack的理解
对Webpack的理解
42 0
|
JSON 缓存 前端开发
webpack相关详细讲解。
webpack相关详细讲解。
|
缓存 前端开发 JavaScript
浅谈webpack
浅谈webpack
100 0
|
JavaScript 前端开发
从了解到使用webpack
Webpack本质上是一种前端资源编译,打包工具
93 0
|
缓存 算法
webpack的chunkFilename详细说明
webpack的chunkFilename详细说明
251 0