你真的懂webpack编译配置吗？

Love The Way You Lie 2021-09-18 09:56 336阅读 0赞

**1、初始化项目**

npm init

这里注意一点，初始化项目时，不要起名为`webpack`。  
**2、安装webpack**  
这里是局部安装，我推荐这样做。

npm i -D webpack

**3、修改package.json**  
加上 `"start": "webpack --config webpack.config.js"` 方便以后运行命令。

{ 
      "name": "webpack_demo",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": { 
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "webpack --config webpack.config.js"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": { 
        "webpack": "^4.41.5"
      }
    }

**4、创建index.html**

<html>
    <head>
      <meta charset="UTF-8">
    </head>
    <body>
    <div id="app"></div>
    
    <script src="./dist/bundle.js"></script>
    </body>
    </html>

**5、创建工具函数show.js**

// 操作 DOM 元素，把 content 显示到网页上
    function show(content) { 
      window.document.getElementById('app').innerText = 'Hello,' + content;
    }
    
    // 通过 CommonJS 规范导出 show 函数
    module.exports = show;

**6、创建JS 执行入口文件 main.js**

// 通过 CommonJS 规范导入 show 函数
    const show = require('./show.js');
    // 执行 show 函数
    show('Webpack');

**7、根目录下创建webpack.config.js**

const path = require('path');
    
    module.exports = { 
      // JavaScript 执行入口文件
      entry: './main.js',
      output: { 
        // 把所有依赖的模块合并输出到一个 bundle.js 文件
        filename: 'bundle.js',
        // 输出文件都放到 dist 目录下
        path: path.resolve(__dirname, './dist'),
      }
    };

**8、执行命令**

npm run start

发表评论取消回复

表情：

评论列表（有 0 条评论，336人围观）

还没有评论，来说两句吧...

相关阅读

相关 SpringBoot自动配置原理，你真的懂吗？

概述上面博文（[SpringBoot简介与快速搭建][SpringBoot]）我们简单的介绍了什么是SpringBoot，以及如何使用SpringBoot，但是我们对于

「爱情、让人受尽委屈。」/ 2023年01月19日 07:14/ 0 赞/ 93 阅读

相关你真的懂jQuery吗?

jQuery创建实例对象及其原型上的方法扩展 jQuery创建实例对象中的参数selector new jQuery.fn.init(selector, co

我会带着你远行/ 2022年12月30日 13:49/ 0 赞/ 181 阅读

相关你真的懂hashCode和equals吗？？？

前言今天还在感概说，可能三年后我的简历和刚毕业那会没啥区别，因为现在已经毕业快一年了，上次重写简历除多了两个项目经验外没啥区别，而简历上面的技术我还需要好久才能掌握。

快来打我*/ 2022年11月04日 13:28/ 0 赞/ 160 阅读

相关你真的懂prototype吗

prototype是学习js的一个重要的概念，即原型的意思，它是属于类型的一个属性，我们知道js里任何元素都要当成对象处理，而类型和对象是不一样的，类型像java里的Cl

爱被打了一巴掌/ 2022年06月11日 00:55/ 0 赞/ 228 阅读

相关你真懂 Css 吗？

> 小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大

一时失言乱红尘/ 2022年04月24日 10:46/ 0 赞/ 231 阅读

相关 ping功能你真的懂吗？

> 不要以为ping不通就是网不行，有时候是你ping的位置不对，有一些是指定源地址才能ping通的。 Windows自带的ping功能可以用来测试网络的连通性，但是你真的会

àì夳堔傛蜴生んèń/ 2022年03月25日 04:25/ 0 赞/ 346 阅读

相关设计模式你真的懂了吗？

前言 `设计模式`这个老生常谈的东西，在以往的面试题以及面试中会经常问到，关于设计模式，网上有很多文章对其进行阐述。但是看了那么多设计模式你真的懂了吗？在项目中除

╰半橙微兮°/ 2022年03月16日 10:22/ 0 赞/ 301 阅读

相关嗨，你真的懂this吗？

this关键字是JavaScript中最复杂的机制之一，是一个特别的关键字，被自动定义在所有函数的作用域中，但是相信很多JavaScript开发者并不是非常清楚它究竟指向的是什

电玩女神/ 2022年02月23日 15:38/ 0 赞/ 244 阅读

相关你真的懂用户画像吗？

在移动互联网时代，精细化运营成为企业重要的竞争力，此时，“用户画像”的概念也应运而生。用户画像是指，在大数据时代，我们通过对海量数字信息进行清洗、聚类、分析，从而将数据抽象成标

旧城等待，/ 2022年02月22日 12:38/ 0 赞/ 246 阅读

相关你真的懂webpack编译配置吗？

1、初始化项目 npm init 这里注意一点，初始化项目时，不要起名为`webpack`。 2、安装webpack 这里是局部安装，我推荐这样做。

Love The Way You Lie/ 2021年09月18日 09:56/ 0 赞/ 337 阅读