zoukankan      html  css  js  c++  java
  • webpack的三种用法

    1.直接命令行使用。
    2.node.js API的使用方式。
    3.webpack / webpack--config webpack. dev.config.js

    //根目录创建 webpack.config.js
    //根目录参数 moule.export={
    entry : './src/script/main.js', //打包从这个js开始 入口文件
    output:{
    path: './dist/js' , //打包后放在那个文件 自动生成
    filename:'bundle.js' //文件名
    }
    }
    一、entry
    1、三种输入方式
    (1)string,输入字符串
    entry:{
    main:'./src/script/main.js'
    },
    (2)array, 数组。适用情况:两个平行的,不相依赖的文件打包在一起。
    entry:{
    main:['./src/script/main.js','./src/script/a.js']
    },
    (3)object, 适用情况:多页面应用程序。这里要和output里的[name]占位符配合使用,威力才能最大。如果你要打包成多 个js文件,那么entry对象里的key叫做chunk就是文件名,里面的值就是需要打包的文件里面包含的文件。
    entry:{
    main:'./src/script/main.js',
    a:'./src/script/a.js'
    },
    二、output
    1、占位符有3种:[name]、[hash]、[chunkhash]
    2、output的filename
    (1)hash: 这次打包的hash
    每次终端运行webpack命令,都会生成一段信息,这段信息的第一行就有一个hash
    (2)chunkhash:每一个chunk自己的hash
    3、output的path,//这里配置的是输出的文件地址


    npm install css-loader style-loader --save-dev

    ------------------------------------------------------------------------------

     webpack --watch

    webpack hello.js hello.bundle.js
    C:UsersAdministratorDesktop igerwebpack-test

  • 相关阅读:
    Java web学习总结
    java web知识点
    SSH进阶之路
    file /etc/httpd/conf.d/php.conf from install of php-5.6.37-1.el7.remi.x86_64 conflicts with file from package mod_php71w-7.1.18-1.w7.x86_64
    centos7上安装php5.6
    centos7 删除php
    centos7删除yum安装的php
    给服务器加内存
    Hyperledger Fabric 开发环境搭建 centos7系统
    79
  • 原文地址:https://www.cnblogs.com/yangwenbo/p/10763014.html
Copyright © 2011-2022 走看看