前端工程化webpack基础配置

月光浇在石子路上

已于 2022-06-01 18:16:48 修改

阅读量249

点赞数

文章标签：前端

于 2022-05-11 17:07:31 首次发布

本文链接：https://blog.csdn.net/qq_39889855/article/details/124670923

版权

本文介绍了webpack作为模块打包器的基本使用和核心概念，包括入口、输出、loader和插件。通过简单步骤展示了如何创建并配置webpack，从新建package.json，安装webpack和webpack-cli，到设置webpack.config.js，最后通过npm run build进行打包，生成dist文件夹。

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

webpack官网webpackwebpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换（transform）、打包（bundle）或包裹（package）任何资源(resource or asset)。https://webpack.docschina.org/

webPack核心概念：

入口：

输出：

loader（载荷）：处理静态资源文件，组装功能

插件：

模式/兼容性：

简单使用

使用 npm init -y命令新建一个package.json文件

使用npm install webpack webpack-cli -D命令下载安装webpack

此时无法使用npm run build 命令

可以在scripts配置下即可

在文件夹下新建webpack.config.js文件，配置入口文档

此时。使用npm run build 打包即可生成dist文件夹

const path = require('path')
console.log(path.resolve()); //当前文件的绝对路径
console.log(path.join(__dirname, './dist')) //拼接上的路径
const config = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.join(__dirname, './dist') //打包的目标文件
    }
}
module.exports = config