zoukankan      html  css  js  c++  java
  • webpack的使用

    webpack是经常使用到的打包工具,它可以使高阶的语法转为低阶语法,提高生产效率。

      1.安装webpack

    • 在项目的目录下运行 指令
    npm install webpack --save-dev 
    • 要想正常使用webpack的功能,还需要运行指令
    npm install webpack-cli --save -dev

      2.使用webpack打包项目

      这里在main.js里面引入jquery模块.并且使用ES6的语法,但是在浏览器中无法正常工作。

    import $ from 'jquery'
    
    $(function () {
        $("p").onclick(function () {
            $("p").fadeOut("slow");
        })
    });
    • 将代码打包到dist文件夹
    webpack src/main.js --output dist/js/bundle.js --mode development

    这样便可以运行ES6语法的js代码了。

    3.webpack的配置文件

    可以在项目中创建一个名为webpack.config.js的文件来进行webpack的相关配置,进行配置后只需要执行 webpack一句指令就可以进行打包

    const path = require('path');
    modules.export = { entry:"./src/index.js", //入口 output:{
          filename:'bundle.js', //出口文件名
          path:path.resolve(__dirname,'dist') //设置绝对路径
        }, //出口 devServer:{}, //开发服务器 module:{}, //模块配置 plugins:[], //插件配置 mode:
    "development", //开发模式配置(可以为production和development) resolve:{}, //配置解析 }
  • 相关阅读:
    成绩单问题
    详细介绍Linux shell脚本基础学习(一)
    千万级并发连接的秘密
    前段面试题
    cat 命令
    面试的一个网页设计师
    准备准备
    ls显示文件
    [HDU 1010 ]Tempter of the Bone
    Linux下的绘图(流程图、UML、mindmap)工具
  • 原文地址:https://www.cnblogs.com/xianglan666/p/13416510.html
Copyright © 2011-2022 走看看