webpack定制化基础配置[基础、配置、初运行]

黑日里不灭的light

已于 2022-09-03 09:48:11 修改

阅读量327

点赞数

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

于 2022-09-03 09:46:39 首次发布

本文链接：https://blog.csdn.net/weixin_46765649/article/details/126594859

版权

Webpack 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

前提：
webpack5及其对应配套内容
node16.13.2

本文作用在webpack.config.js

一、webpack

1.安装

解释：Webpack 是一个静态资源打包工具，其功能比较有限(开发环境下仅编译JS与ES Module；生产环境下外加一个JS压缩;webpack5自动处理图片)，但其扩展性与灵活性及其强

安装：

npm init -y：创建npm包管理及项目
npm i webpack webpack-cli -D #本文版本分别为5.74.0 4.10.0：下载webpack与webpack-cli到开发环境

2.配置

解释：配置基本分为五大配置，还有其它散乱配置，需自行新建文件webpack.config.js

2.1 entry

entry(入口)：指示 Webpack 从哪个文件开始打包

2.1.1 多入口

解释：打包多个js

module.exports ={
    // 多入口
    entry: {
      main: './src/app/main.js',
      app:'./src/app2/main.js'
    }
}

2.2 output

output(输出)：指示 Webpack 打包完的文件输出到哪里去，如何命名等

2.3 module

loader(加载器)# module里面写着自己安装的很多loader：webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader，Webpack 才能解析

注意：loader加载从右往左

2.4 plugins

plugins(插件)：扩展 Webpack 的功能

2.5 mode

mode(模式)：两种模式（production与development）

const webpack = require('webpack'); // 访问内置的插件（require是nodejs专门导入的语法）
const path = require('path')
module.exports = {
  // 输入
  entry: "./src/main.js",
  // 输出
  output: {
    filename: "main.js",
    // 输出到 dist文件夹
    path: path.resolve(__dirname, './dist'),
    // 每次打包前自动清除旧的dist
    clean: true,
  },
  // 加载器
  module: {
    rules: [
		{ test: /\.css$/, use: 'css-loader' },// 需要提前下载
	],
  },
  // 插件
  plugins: [new webpack.ProgressPlugin(),], //需要下载后导入
  // 模式
  mode: "development", 
};

3.运行测试

文件结构：

├── node_moudules
├── package.json
├── package-lock.json
├── public
│   └── templates
		├── index.html
└── src
    └── app
        ├── main.js
        └── views
            └── add.js

webpack.config.js

const path = require('path')

module.exports = {
  // 模式 开发模式
  mode: 'development',
  // 入口文件 main.js
  entry: {
    main: './src/app/main.js'
  },
  // 输出
  output: {
    // 输出到 dist文件夹
    path: path.resolve(__dirname, './dist'),
    // js文件下
    filename: 'didi.js',
    // 每次打包前自动清除旧的dist
    clean: true,
  }
}

package.json

// 主要是加入命令："build": "webpack" 执行webpack打包
// 使用：npm run build
// 不要命名冲突
{
  "name": "npm2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0"
  }
}

public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="../../dist/didi.js"></script>
  <title>gao-cli</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

src/app/main.js

// 需要安装es6语法对外暴露
export const add = (a, b) => {
    return a + b
}

src/app/views/add.js

// es6导入语法
import { add } from "./views/add";
console.log(add(1, 2))

结语：请把本系列都看完再投入开发环境，优化配置很重要