webpack知识点散记-CSDN博客

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

转载于:https://www.cnblogs.com/lmxxlm-123/p/9445681.html