webpack第1章 -- 初识webpack_webpack 'use strict';-CSDN博客

本文链接：https://blog.csdn.net/weixin_38629529/article/details/117398079

webpack系列的文章，是在学习完《玩转webpack》这门课程后（毕竟之前不是太了解），巩固沉淀而来，如有错误，欢迎指正。

1、基础环境

安装nodejs、npm（yarn也可）
安装开发工具Visual Studio Code
检查是否安装完成：node -v，npm -v

2、新建文件夹

// 新建空目录
mkdir my-project
// 进入新建的目录
cd my-project
// 初始化项目,y表示默认选择yes,这里是生成package.json
npm init -y

当然，直接新建文件夹之后，通过vs打开也是完全OK的。

3、安装依赖

// --save-dev表明在package.json文件中，依赖安装在devDependencies里而非dependencies
npm install webpack webpack-cli --save-dev

检查webpack是否安装好，终端输入：webpack -v 即可，例如：

4、简单例子
前期工作的准备好了，接下来看一个完整的小例子吧！
（1）在my-project目录下新建webpack.config.js文件，内容如下：

'use strict';

const path = require('path');

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

最后的目录如下图：

（2）补充一下bar.js，index.js的内容

// bar.js

export function bar() {
    return 'Hello World';
}

// index.js

import {bar} from './bar';

document.write(bar());

（3）在终端输入打包命令：npm webpack 成功生成打包文件

（4）运行index.html文件，页面输出：Hello World

<!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>Document</title>
</head>
<body>
    <script src='./dist/bundle.js'></script>
</body>
</html>

到这里，应该对webpack打包目录结构有了一个简单的了解，下面将对wepack的配置文件做详细讲解。