webpack笔记

webpack

1. 安装

   npm i -g [email protected](版本号)
   例如：npm i -g [email protected]
   

2. 编写配置文件

   默认：webpack.config.js ,也可以指定其他名称

   webpack基本配置

   module.exports={
       entry:'入口文件名',
       output:{
           path:"目标目录",
           filename:"目标文件名"
       }
   };
   

   例如：

    const pathlib = require("path");
    module.exports={
    entry:{
    	 index:"./src/index.js",
        test:"./src/1.js"
    },
    output:{
        path:        pathlib.resolve("dest/"),  //目标目录
        filename:   "bundle.js"                 //目标文件名称
        }
    };
   

   多入口处理：

   entry:{
       名字1：'文件1名称',
       名字2：'文件2名称',
       ...
   },
   output:{
       path:"目标目录",
       filename:'[name].目标文件名'//[name]是占位符
   }
   

   ES6–import/export

   ES6模块化

   export default xxx;  import xxx from '...';  //作为模块本身被输出 
   export let a = 12,b=5;  import {a,b} from    //输出模块内的东西 '...';
   

3. 编译：

   webpack webpack.config.js
   

   非默认配置文件名，则在编译时加上–config参数

   webpack --config xxx.config.js
   

4. 运行：

   前台

   在html文件中插入以下语句，然后用浏览器运行该html文件

   <script src="../dest/index.bundle.js"></script>
   

   后台

   直接用node运行

   node index.bundle.js