1、今天学习webpack  ，刚开头就碰到了钉子，因为现在都是4+的版本，用以前的老命令不好使，如下例子及解决办法

不好用：  webpack3的   打包文件   webpack a.js b.js

好用：   webpack4  ：webpack --mode development a.js --output-filename  b.js --out-path dist      //a.js：目标文件    b.js ：要打包成的文件   dist：打包到的文件夹的名字

  1. （1）app.js
  2. //es
  3. import sum from './sum'
  4.  
  5. //common
  6. var minus=require('./minus')
  7.  
  8. //amd
  9. require(['./muti.js'],function(muti){
  10.   console.log('*'+muti(2,5))
  11. })
  12.  
  13. console.log('+'+sum(2,3))
  14. console.log('-'+minus(5,2))
  1. （2）sum.js
  2. export default function (a,b){
  3.   return a+b
  4. }
  5.  
  6. （3）minus.js
  7. module.exports=function(a,b){
  8.   return a-b
  9. }
  10.  
  11. （4）muti.js
  12. define(function(require,factory){
  13.   'use strict';
  14.   return function(a,b){
  15.     return a*b
  16.   }
  17. })
  1. （5）index.html
  2. <html>
  3.   <body>
  4.     <script src='dist/bundle.js'></script>
  5.     <script src='dist/0.bundle.js'></script>
  6.   </body>
  7. </html>
  1. （6）执行命令
  2. webpack --demo development  app.js --output-filename  bundle.js --output-path dist

  1. //话说webpack里要用module.exports
  2. module.exports = {
  3.   entry:{
  4.     app:'./app.js' //入口
  5.   },
  6.   output:{
  7.     filename:'[name].[hash:5].js' //出口
  8.   }
  9. }
    文件名：webpack.conf.js
    原命令：webpack --config  webpack.conf.js
    命令：webpack --mode development --config webpack.conf.js
  1. 文件名：webpack.config.js  //如果文件夹名字是webpack.config.js   那么就不用--config + 名字了
    原命令：webpack
    命令：webpack --mode development 
  1.  

webpack知识点散记的更多相关文章

  1. webpack 知识点

    安装 webpack npm install -g webpack npm install -g webpack-cli@2.x 初始化项目 npm init -y npm install --sav ...

  2. webpack 知识点总结

    1 webpack 的不同点: 1.1 实现代码分割 1.2 loaders 1.3 plugin system 2 webpack 打包css,需要使用css-loaders 使webpack识别c ...

  3. webpack知识点整理

    作用域 es6里模块化的写法 会存在的问题,变量.方法名字雷同,外部文件调用的时候出现问题 如 a.js里 var a='susan' b.js里 var a='jack' 问题解决方案,添加包裹 a ...

  4. vue知识点散记

    1.iphone5微信浏览器里的methods里貌似不兼容  test(){} 写法,只支持test:function(){} 2.v-cloak 防止双括号的闪烁 <div id=" ...

  5. 深入浅出的webpack构建工具---webpack基本配置(一)

    深入浅出的webpack构建工具---webpack基本配置(一) 阅读目录 一:webpack入门构建: 1. 安装webpack到全局 2. 安装webpack到本项目. 3. 如何使用webpa ...

  6. 深入理解webpack基本配置（一）

    1. 安装webpack到全局 在学习构建之前,我们来在本地文件新建一个存放项目的文件夹,比如叫demo1这个项目,然后进入demo1该项目的根目录后,执行命令 npm init运行下,一路回车(先简 ...

  7. 深入了解webpack前，可以了解的小知识点。

    阅读前:文章大概是写,简单用过webpack,想继续深入了解webpack前需要了解的知识.但文章内容跟webpack使用关系并不大. 文章概要: Object.defineProperty call ...

  8. webpack散记

    1. manifest manifest存储了webpack的chunk相关的信息.具体为一个对象,或者包含runtime的一段代码.其中包含着一个chunkId,已经对应chunkId的相关信息,例 ...

  9. webpack 4 基础知识点梳理

    目录 webpack安装 webpack配置文件 webpack核心概念 entry output loader plugins sourceMap webpack-dev-server 跨域 &am ...

随机推荐

  1. Python学习第四课——基本数据类型一之int and str

    1.数字(int) - int() 方法 # 定义 a1=123 a2=456 #功能1:将字符串转换为数字 #例子1: a = " print(type(a)) # type()为查看类型 ...

  2. .net高手：forms验证中中<forms loginUrl="" defaultUrl="">defaulturl和loginurl的区别

    .net高手:forms验证中中<forms  loginUrl="" defaultUrl="">defaulturl和loginurl的区别 d ...

  3. ch7对表单和数据表格使用样式

    对数据表格应用样式 1.表格特有的元素 caption:基本上用做表格的标题.summary:可应用于表格的标签,用来描述表格的内容(与image的alt文本相似) <table class=& ...

  4. Cookie跨域setDomain和setPath

    CSDN日报20170226--<你离心想事成只差一个计划> 程序员2月书讯 [招募]Python学习班招生啦 Cookie跨域setDomain和setPath 标签: cookiesp ...

  5. Html5使用audio播放音乐

    html代码 <audio  id="myaudio" src="http://ws.stream.qqmusic.qq.com/C100003R74Cn0JR4O ...

  6. （转）C#的 GC工作原理基础

    作为一位C++出身的C#程序员,我最初对垃圾收集(GC)抱有怀疑态度,怀疑它是否能够稳定高效的运作:而到了现在,我自己不得不说我已经逐渐习惯并依赖GC与我的程序“共同奔跑”了,对“delete”这个习 ...

  7. 关闭Hyper-V后，天翼校园宽带（Netkeeper）依旧显示Sorry, this application cannot run under a Virtual Machin的解决方法

    环境: win10专业版,版本1909 经过: 尝试了一下win10 更新后的沙盒系统,当时开启了沙盒,但是未打开Hyper-V,沙盒正常运行. 第二次开机后天翼校园宽带(Netkeeper)显示So ...

  8. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：按钮组

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 图片：图片响应式 (将很好地扩展到父元素)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  10. SciPy 常量

    章节 SciPy 介绍 SciPy 安装 SciPy 基础功能 SciPy 特殊函数 SciPy k均值聚类 SciPy 常量 SciPy fftpack(傅里叶变换) SciPy 积分 SciPy ...