zoukankan      html  css  js  c++  java
  • 入门学习webpack笔记

    注意事项
    1.预热知识:前端模块化、commonJS最好提前了解。commonJS语法最好熟悉。
    2.commonJS中,module表示当前模块,module.exports(或者exports)代表外部引用包时,实际所引用的对象。
    步骤
    1.安装webpack:cnpm install webpack -g。
    2.使用node命令行定位到需要开发的目录下,使用cnpm init初始化目录。
    3.在某个路径下书写模块(一系列js文件)。
    4.配置webpack配置文件webpack.config.js(类似gulp的gulpfile.js配置文件),指定入口文件,输出文件以及输出路径等。
    5.在node命令行下直接webpack打包(依赖于配置文件),最终生成一个js文件。
    6.在HTML中引用这个js文件即可实现之前的功能。

    第4步中webpack配置文件的写法:
    单入口文件

     1   var path = require('path');
     2 
     3   module.exports = {
     4   entry:{
     5     ab:'./component/ab.js', //入口文件,引用其他模块的文件
     6   },
     7   output:{
     8     filename:'bundle.js',    //输出文件
     9     path:path.resolve(__dirname,'dist'),    //指定输出路径
    10   },
    11 }


    多入口文件

     1 var path = require('path');
     2   module.exports = {
     3   entry:{
     4     ab:'./component/ab.js',
     5     cd:'./component/cd.js'
     6   },
     7   output:{
     8     filename:'[name].js',    //这里的name代表entry里的对象名字,表示占位
     9     path:path.resolve(__dirname,'dist'),
    10   },
    11 }

    推荐入门教程:

    该篇笔记太过简陋,推荐入门Webpack教程:从这里开始入门Webpack

  • 相关阅读:
    004 连接查询
    003 常用函数说明
    003 限定查询
    002 基础查询
    001 基础数据表脚本
    001 redis的简介和重点
    006 表单组件
    005 基本表单
    004 表格元素
    谚语,
  • 原文地址:https://www.cnblogs.com/DM428/p/7088667.html
Copyright © 2011-2022 走看看