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

    一:定义

    WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。

    说白了:就是后端的语言,浏览器不能解析,而webpack就是一个中间人,把数据打包,翻译给浏览器能识别的语言,最后渲染页面.

    二:webpack的使用

    安装:

    项目内安装;

    1,首先先执行npm命令,安装json文件
    npm init -y   ==>会安装json文件  
    
    2,安装包webpack
    npm i(install) webpack --save-dev    #开发环境依赖
    
    
    PS:只有先装json文件,webpack才会安装在json文件所在的项目处
    View Code

    全局安装

    在全局安装webpack
    npm install webpack -g 
    可以在任何目录下用webpack
    webpack 入口文件  出口文件
    View Code

    三:使用代码:

    在node的眼里所有的文件都是模块,都有两个口,一个入水口,一个出水口

    例:

    第一步:

      "scripts": {
        "test": "echo "Error: no test specified" && exit 1",
        "pack":"node_modules/.bin/webpack"     #配置好路径
      },
    
    由于我们是项目里安装,所有wenpack安装在bin目录,所以先配置好路径
    后期调用直接运行命令: npm run pack
    在packjage配置webpack路径,减少代码产生

    第二:

    module.exports={
        entry:{
            home:'./next/home.js',       #输入口,前为文件名,后为文件路径
            signup:'./next/signup.js'
        },        //需要输出的文件名
        output:{
            filename:'[name].bundle.js',        #[name]是指上面的home和signup引入名,正条命令是指保存的出口名
            path:__dirname+'/dist',    //出口保存的文件路径
        }
    }
    配置webpack.config.js文件,记住文件步能改变

    第三,入口处写好逻辑代码,实现最后处口代码

    base.js文件
    var open=true;
    export{open};
    判断信息

    home.js文件

    import {open} from './base'
    
    if(open){
        document.body.innerHTML=`
        <a href="signup.">注册</a>
        `
    }
    引入base.js文件的bool值,作出相应的动作

    signup.js文件

    import {open} from './base'
    
    if(open){
        alert(123);
    }
    引用base值,作出选择

    第四步:产生出口文件

    var open=true;
    
    PS:文件名是配置webpack.config.js产生的
    home.bundle.js
    var open=true;
    
    if(__WEBPACK_IMPORTED_MODULE_0__base__["a" /* open */]){
        document.body.innerHTML=`
        <a href="signup.html">注册</a>
        `
    }
    signup.bundle.js

    最后,产生文件可以别其他html引用

    <script src="./dist/home.bundle.js"></script>
    <script src="./dist/signup.bundle.js"></script>
    
    产生不同的结果
    aa.html

    产生目录如图:

  • 相关阅读:
    JavaScript Date对象和函数 (一)
    Css3 文字渐变整理(一)
    Asp.net Core CacheHelper 通用缓存帮助类
    .net core中使用GB2312编码的问题
    苹果手机微信浏览器select标签选择完成之后页面不会自动回到原位
    .Net Core NOPI操作word(二) 表格操作
    .Net Core NOPI操作word(一)
    .NetCore中EFCore的使用整理(三)-关联表操作
    windos server2012安装.net core 2.2问题
    C# 最简单的使程序单进程运行的方法
  • 原文地址:https://www.cnblogs.com/52forjie/p/8372202.html
Copyright © 2011-2022 走看看