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）app.js

//es

import sum from './sum'

//common

var minus=require('./minus')

//amd

require(['./muti.js'],function(muti){

  console.log('*'+muti(2,5))

})

console.log('+'+sum(2,3))

console.log('-'+minus(5,2))
（2）sum.js

export default function (a,b){

  return a+b

}

（3）minus.js

module.exports=function(a,b){

  return a-b

}

（4）muti.js

define(function(require,factory){

  'use strict';

  return function(a,b){

    return a*b

  }

})
（5）index.html

<html>

  <body>

    <script src='dist/bundle.js'></script>

    <script src='dist/0.bundle.js'></script>

  </body>

</html>
（6）执行命令

webpack --demo development  app.js --output-filename  bundle.js --output-path dist

//话说webpack里要用module.exports

module.exports = {

  entry:{

    app:'./app.js' //入口

  },

  output:{

    filename:'[name].[hash:5].js' //出口

  }

}
文件名：webpack.conf.js
原命令：webpack --config  webpack.conf.js
命令：webpack --mode development --config webpack.conf.js

文件名：webpack.config.js  //如果文件夹名字是webpack.config.js   那么就不用--config + 名字了
原命令：webpack
命令：webpack --mode development 
 

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. 延迟加载以及mybatis一级二级缓存

    延迟加载 延迟加载:在真正使用数据时才发起查询,不用的时候不查询,又叫按需查询(懒加载) 立即加载:不管用不用,只要调用方法,直接发起查询 表关系:一对多     多对一     一对一        ...

  2. primecoin服务常用命令和参数说明

    Primecoin命令: 启动服务:./primecoind -daemon -rpcuser=user -rpcpassword=password -txindex=1 -addrindex=1 - ...

  3. shell脚本中执行sql脚本并传递参数(mysql为例)

    1.mysql脚本文件 t.sql insert into test.t values(@name,@age); exit 2.shell脚本文件 a.sh  (为方便演示,与t.sql文件放在同一目 ...

  4. 「NOIP2012」开车旅行

    传送门 Luogu 解题思路 第一步预处理每个点后面的最近点和次近点,然后就是模拟题意. 但是如果就这么搞是 \(O(N^2)\) 的,不过可以过70分,考场上也已经比较可观了. 考虑优化. 预处理最 ...

  5. 前端学习笔记系列一：10整体移动vscode代码块、VSCode 使用 stylus，配置格式化设置、在vue项目中引入bootstrap

    1.整体移动vscode代码块 凭借操作的经验我们能够轻松地知道将代码整体往右移只需选中代码按Tab键即可.其实往左移也很简单: 选中之后按下 shift+Tab键 即可. 2.VSCode 使用 s ...

  6. angularJS MVVM

  7. js 转换时间戳为时间格式并且按指定格式输出

    /** * 时间戳转换为日期 */ function convertTimestamp(timestamp){ // 时间戳转换为日期 var d = new Date(timestamp); // ...

  8. loadrunner controller查看参数日志

    1.在generator,我们用这个语句来输出参数:lr_output_message("目录为%s", lr_eval_string("{NewParam}" ...

  9. wx.previewimage预览返回会触发onshow的处理方法

    最近做详情页,添加图片预览后竟然触发onshow的处理方法.就显得很尴尬.框架用的uni-app 解决方法 1.page外全局定义开关变量 var a; export default { } 2 .o ...

  10. 外网如何访问 Service？【转】

    除了 Cluster 内部可以访问 Service,很多情况我们也希望应用的 Service 能够暴露给 Cluster 外部.Kubernetes 提供了多种类型的 Service,默认是 Clus ...