webpack安装、配置、运行2

Strawberry96

已于 2022-08-30 15:26:09 修改

阅读量272

点赞数

文章标签： webpack npm 前端

于 2022-08-30 15:23:42 首次发布

本文链接：https://blog.csdn.net/zhangying1996/article/details/126138837

版权

一个最简单的小栗子

1、简单的配置项

2、安装webpack

在安装webpack之前需要先安装node.js和npm。

（1）、安装空目录和package.json

mkdir my-project   //创建一个空目录

cd my-project   //进入空目录

npm init -y   //create a package.json file y表示都选yes

此时，生成了package.json文件。

（2）、安装webpack和webpack-cli

npm install webpack webpack-cli --save-dev

webpack -v  //检查是否安装成功

安装时生成了node_modules文件夹和package-lock.json文件

--save 和 --save-dev 的区别在于：

–save -dev ，下载的插件放在package.json文件的devDpendencies对象里面
–save，下载的插件放在package.json文件的dependencies对象里面

devDependencies 和 dependencies的区别在于：

devDependencies里包含的是本地开发环境需要的依赖包
dependencies里包含的是发布环境所需要的依赖包

通过npm安装时，还会在最后加上-D 和 -S，-D 和 -S的区别：

-D 相当于 -save-dev

-S 相当于 -save

所以在安装插件时会使用-S，因为需要在生产环境中使用。

3、基础配置

（1）、新建一个webpack.config.js

//webpack.config.js

'use strict'
const path = require('path');  // path是一个 Node.js 核心模块，用于操作文件路径。

module.exports = {
    entry: {
        index: './src/index.js'
    },
    output:{
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'  // 打包后的目录
    },
    mode: 'production'
}

path是一个 Node.js 核心模块，用于操作文件路径，可查看node.js详细文档。

Path | Node.js v18.8.0 Documentation

（2）、新建src/index.js

//index.js

document.write('hello world')

（3）、通过webpack命令行运行

此时，运行之后会生成dist/bundle.js

然后在dist中新建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">
    <title>hello webpack</title>
</head>
<body>
    <script src="bundle.js" type="text/javascript"></script>
</body>
</html>

在浏览器中打开dist/index.html