目的:想要通过npm命令按照我们的规则生成静态资源(webpack4以后还能做到很多性能优化的配置,我所知道的只有css、js分包,以达到资源快速加载快速呈现的效果)。

一、安装webpack

  1. npm install --save-dev webpack
    or
  1. npm i webpack -D

二、由于build和start都会有相同的配置,所以先搞一个公共配置文件webpack.base.conf.js

  1. 'use strict'
  2. const path = require('path');
  1. module.exports = {
  2. entry: './src/index.js',
  3. output: {
  4. path: path.resolve(__dirname, 'dist'),
  5. filename: 'bundle.js'
  6. }
  7. };

三、如何运行webpack

1、通过webpack-dev-server实现自动监听并允许webpack

  1. npm i webpack-dev-server -D

2、在package.json中配置脚本

  1. "scripts": {
  2. "start": "webpack-dev-server --config build/dev.js",
  3. "build": "node build/build.js"
  4. },

【Webpack】NodeJS + Webpack的更多相关文章

  1. 【译文】使用webpack提高网页性能优化

    这篇文章原文来自https://developers.google.com/web/fundamentals/performance/webpack/. 说是译文其实更像是笔者做的笔记,如有错误之处请 ...

  2. 【APT】NodeJS 应用仓库钓鱼,大规模入侵开发人员电脑,批量渗透各大公司内网

    APT][社工]NodeJS 应用仓库钓鱼,大规模入侵开发人员电脑,批量渗透各大公司内网 前言 城堡总是从内部攻破的.再强大的系统,也得通过人来控制.如果将入侵直接从人这个环节发起,那么再坚固的防线, ...

  3. 简单学习【1】——使用webpack

    使用webpack webpack命令 webpack配置 第三方脚手架 1.webpack命令 webpack - h (webpack 所有的选项) webpack -v (查看webpack的版 ...

  4. 【nodejs代理服务器二】nodejs webpack打包配置踩坑总结

    接着上篇用Nodejs开发web代理,防止web渗透.如果部署到正式环境,需要进行打包配置. 我在用webpack打包配置中遇到了几个错误,总结如下: webpack环境变量问题 https://ww ...

  5. 【原】使用webpack打包的后,公共请求路径的配置问题

    在我们公司,和后台接接口时,公共的请求路径我们是单独抽出来的,放在一个独立的public.js中,在public.js中存入那个公共变量 公共变量是这样 在其他地方使用ajax时,我们就这样使用 这种 ...

  6. 【转载】基于webpack构建react项目

    第一部分链接:下载所需内容并构建基础的页面 第二部分链接:添加webpack中的一些常用babel和loader 第三部分链接:开发环境与生产环境的配置

  7. 【原】nodejs全局安装和本地安装的区别

    来微信支付有2年多了,从2年前的互联网模式转变为O2O模式,主要的场景是跟线下的商户去打交道,不像以往的互联网模式,有产品经理提需求,我们帮忙去解决问题. 转型后是这样的,团队成员更多需要去寻找业务的 ...

  8. 【转载】nodejs,npm,express分别什么?

    很多刚刚接触nodejs的初学者,都会经历一个很繁冗的环境安装过程. 一般主要要安装nodejs,npm和express三样东西.那么这三样东西分别是干什么的呢? 本篇文章就大致介绍一下这三样东西分别 ...

  9. 【转载】NodeJS、NPM安装配置步骤(windows版本)

    1.windows下的NodeJS安装是比较方便的(v0.6.0版本之后,支持windows native),只需要登陆官网(http://nodejs.org/),便可以看到首页的“INSTALL” ...

随机推荐

  1. 【FZYZOJ】「Paladin」瀑布 题解(期望+递推)

    题目描述 CX在Minecraft里建造了一个刷怪塔来杀僵尸.刷怪塔的是一个极高极高的空中浮塔,边缘是瀑布.如果僵尸被冲入瀑布中,就会掉下浮塔摔死.浮塔每天只能工作 $t$秒,刷怪笼只能生成 $N$  ...

  2. 【从零开始撸一个App】Dagger2

    Dagger2是一个IOC框架,一般用于Android平台,第一次接触的朋友,一定会被搞得晕头转向.它延续了Java平台Spring框架代码碎片化,注解满天飞的传统.尝试将各处代码片段串联起来,理清思 ...

  3. Python 3.9 beta2 版本发布了,看看新特性?

    随着 Python 3.9.0b1 的发布,即开发周期中计划的四个 beta 版本的首个,Python 3.9 的功能已经是完善了.在 10 月发布最终版本之前,还会有许多测试和稳定性方面的工作要做. ...

  4. 深入探究JVM之方法调用及Lambda表达式实现原理

    @ 目录 前言 正文 解析 分派 静态分派 动态分派 单分派和多分派 动态分派的实现 Lambda表达式的实现原理 MethodHandle 总结 前言 在最开始讲解JVM内存结构的时候有简单分析过方 ...

  5. 1、迭代器 Iterator模式 一个一个遍历 行为型设计模式

    1.Iterator模式 迭代器(iterator)有时又称游标(cursor)是程序设计的软件设计模式,可在容器(container,例如链表或者阵列)上遍访的接口,设计人员无需关心容器的内容. I ...

  6. 2020-07-26:如何用 socket 编程实现 ftp 协议?

    福哥答案2020-07-26: 功能用户输入user username.pass password注册,注册后输入dir查看服务器文件列表,输入get filename path下载文件到指定路径. ...

  7. C#LeetCode刷题之#290-单词模式(Word Pattern)

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3778 访问. 给定一种 pattern(模式) 和一个字符串 s ...

  8. Memcached高可用组件之repcached

    在前边的tomcat session server msm的那篇博客我们用memcached做tomcat session服务器,默认官方memcached是不支持主从同步的,为了解决memcache ...

  9. Mybatis-09-缓存

    缓存 什么是缓存[Cache]? 存在内存中的临时数据 提高查询效率,解决高并发的性能问题 为什么使用缓存? 减少和数据库的交互次数,减少系统开销,提高系统效率 什么样的数据能使用缓存? 经常查询且不 ...

  10. unity探索者之socket传输protobuf字节流(二)

    版权声明:本文为原创文章,转载请声明http://www.cnblogs.com/unityExplorer/p/6977935.html 上一篇主要说的是protobuf字节流的序列化和解析,将pr ...