• webpack知识点散记


    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
     

     

  • 相关阅读:
    canvas-8clip.html
    canvas-7globleCompositeOperation2.html
    canvas-7globleCompositeOperation.html
    canvas-7global.html
    canvas-6shadow.html
    canvas-6font.html
    A1036. Boys vs Girls
    A1006. Sign In and Sign Out
    A1011. World Cup Betting
    String 对象-->charAt() 方法
  • 原文地址:https://www.cnblogs.com/lmxxlm-123/p/9445681.html
Copyright © 2020-2023  润新知