What is Webpack

梦里梦外; 2023-07-10 05:06 1阅读 0赞

Webpack is a front-end tool to build JavaScript module scripts for browsers.

It can be used similar to Browserify, and do much more.

$ browserify main.js > bundle.js
    # be equivalent to
    $ webpack main.js bundle.js

Webpack needs a configuration file called `webpack.config.js` which is just a CommonJS module.

// webpack.config.js
    module.exports = {
      entry: './main.js',
      output: {
        filename: 'bundle.js'
      }
    };

After having `webpack.config.js`, you can invoke Webpack without any arguments.

$ webpack

Some command-line options you should know.

*  `webpack` – building for development
 *  `webpack -p` – building for production (minification)
 *  `webpack --watch` – for continuous incremental building
 *  `webpack -d` – including source maps
 *  `webpack --colors` – making building output pretty

You could customize `scripts` field in your package.json file as following.

// package.json
    {
      // ...
      "scripts": {
        "dev": "webpack-dev-server --devtool eval --progress --colors",
        "deploy": "NODE_ENV=production webpack -p"
      },
      // ...
    }

--------------------

$ npm i -g webpack webpack-dev-server

Then, clone the repo.

$ git clone https://github.com/xxxx.git

Install the dependencies.

$ cd webpack-demos
    $ npm install

Now, play with the source files under the repo's demo\* directories.

$ cd demo01
    $ npm run dev

If the above command doesn't open your browser automatically, you have to visit [http://127.0.0.1:8080][http_127.0.0.1_8080] by yourself.

--------------------

[http_127.0.0.1_8080]: http://127.0.0.1:8080/

发表评论取消回复

表情：

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

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

相关阅读

相关 What is Webpack

Webpack is a front-end tool to build JavaScript module scripts for browsers. It can be

梦里梦外;/ 2023年07月10日 05:06/ 0 赞/ 2 阅读

相关 what is 混合开发？

文章目录一、混合开发是什么？二、web网页和ios，android进行交互(原理) web网页和ios，android进行交

╰+攻爆jí腚メ/ 2022年12月27日 02:26/ 0 赞/ 147 阅读

相关 CTF What-is-this

题目描述：找到FLAG 题目附件：附件1 1、附件1 链接：[https://pan.baidu.com/s/1hiGglfTDAssjdm-apC4xLw ][h

た入场券/ 2022年12月11日 12:29/ 0 赞/ 163 阅读

相关 what is Bigdata

Bigdata define huge data，The scale of the data involved is so huge that it is impossib

矫情吗；*/ 2022年10月07日 13:00/ 0 赞/ 176 阅读

相关 What is Suricata 翻译

h1. What is Suricata H1。什么是Suricata The Suricata Engine is an Open Source Next G

﹏ヽ暗。殇╰゛Y/ 2022年08月21日 02:21/ 0 赞/ 162 阅读

相关 What is ABAP?

Advanced Business Application Programming ( ABAP) is SAP’s own programming language. All

小咪咪/ 2022年08月10日 08:47/ 0 赞/ 177 阅读

相关 What is 'JNDI'? What does 'JDNI' do?

文章转自：[http://blog.csdn.NET/cymm\_liu/article/details/34417907][http_blog.csdn.NET_cymm_l

╰+哭是因爲堅強的太久メ/ 2022年06月15日 01:45/ 0 赞/ 168 阅读

相关 what is Velocity

Velocity是一个基于Java的模板引擎。它允许任何人使用简单而强大的模板语言来引用Java代码中定义的对象。当Velocity用于Web开发时，Web设计人员可以与J

客官°小女子只卖身不卖艺/ 2022年06月08日 05:17/ 0 赞/ 168 阅读

相关 What is OpenRASP

目录 Meet it What is OpenRASP -------------------- Meet it Once I saw it in th

╰半橙微兮°/ 2021年12月01日 13:44/ 0 赞/ 253 阅读

相关 what AS and Is are?

今天看了AnyTao博客上 -------\[你必须知道的.NET\] 第一回：恩怨情仇：is和as ,通过MSDN，对As 和Is在C\里的用法来了个深刻的理解，现总结一

待我称王封你为后i/ 2021年10月19日 17:24/ 0 赞/ 253 阅读