zoukankan      html  css  js  c++  java
  • webpack(1)

    现在越来越多的JS代码被用在页面上 , 如何去很好地组织这些代码 , 成为了一个必须要解决的问题
    不止有JS需要被模块化管理 , 前端当中很多的图片 css样式 , 都是需要被统一管理 , 方便进行扩展和维护的

    所以webpack有如下几个目标 :

    • 将依赖树拆分
    • 保证初始加载的速度
    • 所有静态资源可以被模块化
    • 可以整合第三方的库和模块
    • 可以构造大型项目

    使用方法 :

    安装

    npm init - 生成一个package.json文件
    npm install webpack --save-dev - 添加webpack依赖

    这里可以对webpack执行全局安装 , 也可以只在当前项目当中进行安装
    如果是按照上面的方式只在该项目中安装
    可以在package.json当中配置脚本执行命令 , 用以执行webpack

      "scripts": {
        "build": "webpack --progress",
        "start": "webpack-dev-server --progress"
      },
    
    webpack的配置

    每个项目下都必须有一个webpack.config.js , 它就相当于webpack的一个配置文件 , 告诉webpack该做什么

    这里先写一个最基本的可用配置
    其实还有很多的配置项 , 具体可以查看官方文档

    module.exports = {
        //页面入口文件配置
        //相当于执行这个JS文件可以直接或间接找到项目中用到的所有模块
        entry: {
            index : './src/entry.js'
        },
        //入口文件输出配置
        //最终要打包生成什么名字的文件, 放在哪里
        output: {
            path: __dirname,//表示当前目录
            filename: 'bundle.js'
        }
    };
    

    现在编写js文件
    src/content.js

    //这个文件相当于项目中所用到的一个模块
    module.exports = "现在的内容来自于content.js文件";
    

    src/entity.js

    //这是我们定义的入口文件, 引用content模块
    document.write(require("./content.js"));
    

    编写完成之后 , 直接执行npm run build就可以执行webpack的打包操作

    最后写一个html文件, 引入生成的bundle.js即可
    ( 后面会提到怎样去自动生成这个静态页面 )

  • 相关阅读:
    随机性的控制
    856. 括号的分数
    376. 摆动序列(贪心算法)
    XGBoost 安装方法
    1405. 最长快乐字符串(贪心算法)
    1296. 划分数组为连续数字的集合(贪心算法)
    1353. 最多可以参加的会议数目(贪心算法)
    435. 无重叠区间(贪心算法)
    Array-数组-数据结构
    认识Redis和安装
  • 原文地址:https://www.cnblogs.com/programInit/p/6581229.html
Copyright © 2011-2022 走看看