webpack初学,第一篇笔记

·  阅读 152
webpack初学,第一篇笔记

菜菜的笔记

今天上班时把工作做完了,抽空学了一下webpack,才学了最基本最基本的安装和配置,所以笔记也非常的基础。别问我为啥现在才学,emmmm,刚出来的菜菜,没学的还有很多很多,连冰山一角都还没学到,哭了

webpack的安装

首先创建一个新项目 初始化npm,在本地安装webpack,并安装 webpack-cli 如下所示:

// 创建新目录
mkdir webpack_demo
// 切换到新目录路径下
cd webpack_demo 
// 初始化npm
npm init -y  
// 安装 webpack 和 webpack-cli
npm install webpack webpack-cli --save-dev 
复制代码

webpack的配置文件

// 打开配置文件 webpack.config.js


// 引入 node核心模块 path
// 调用它的 .resolve() 方法
const path = require('path')

moudule.exports = {
    // webpack 默认模式是 production,打包后代码被压缩
    // development 模式下,打包后的代码没有被压缩
    mode: 'development',
    // 项目打包的入口文件,从哪个文件打包
    entry: './index.js',
    // 打包后放在哪个文件夹下
    output: {
        // 打包后的文件名字
        filename: 'bundle.js',
        // 打包出的文件放在哪里(绝对路径)
        path:path.resolve(_dirname, 'bundle')
    }
}
复制代码

执行打包的命令:npx webpack

简单来说,当我们运行npx webpack命令的时候,程序会自动去找默认配置文件==webpack.config.js==,然后根据里面的配置执行打包任务。

如果我们将默认的配置文件改名为其他名字,如webpack.con.js,程序找不到默认配置文件,该如何做?

很简单,使用 npx webpack --config xxx 命令行来执行项目打包

npx webpack --config webpack.con.js 

// config后面跟自定义文件名 
复制代码
分类:
前端
标签:
分类:
前端
标签: