zoukankan      html  css  js  c++  java
  • 模块打包工具webpack

    1.webpack的安装

    1.1在安装node的基础上,npm install -g webpack(window版本,因为是全局安装,所以无所谓是哪个路径下)

    1.2新建一个文件夹用于此项目  eg:D盘新建一个mywebpack文件夹

    1.3找到这个文件夹,npm init   完成之后在mywebpack文件夹中出现一个package.json文件,文件中是刚执行的操作内容

    1.4在mypack文件中新建一个index.html,引入一个bundle.js(注意:这时bundle.js是没有的),再新建一个app.js,app.js中写入操作。要达到的目的是引用bundle.js一个js文件可以用到app.js或更多js的功能。

    代码:

    app.js中:

    alert("我是app.js")

    然后运行:在同等目录下执行webpack  app.js  bundle.js  这时,运行index.html会出现app.js里面的内容,文件夹中会自动创建bundle.js   

    1.4.1   如果想要bundle.js用到app.js以及其他js的内容可以这样做。

    新建people.js   

    //字符串形式
    module.exports="我是people.jshhh";  
    //函数形式
    function getinfo(){     //函数
        return "我是函数";
    } 
    module.exports=getinfo();    //getinfo()对外公开
    //数组、对象形式
    let people=[
        {name:"hanna"},
        {name:"xumin"}
    ]
    module.exports=people;

    app.js中

    //需要用require注入,需要注意的是require后面,如果是自己写的js,就算是同级目录也需要写./   如果是引入的库什么的不需要写./
    var people=require("./people.js");
    console.log(people[0].name);

    当然每次修改了需要执行一次:webpack  app.js  bundle.js   如果想要每修改一次自动监听,执行一次webpack app.js bundle.js  --watch  就可以了

    2.webpack-运用第三方库

    2.1 使用第三方库(jquery)

    对应文件夹下 npm install iquery --save

    //测试是否引用了jquery
    let $=require("jquery");
    $.each(people,function(key,value){
        $("body").append("<h3>"+people[key].name+"</h3>")
    });

    2.2 模块化静态文件(css)

    要安装css-loader  做法是在当前目录执行  npm install css-loader style-loader --save-dev

    require("!style-loader!css-loader!./index.css")

    2.3 使用配置文件webpack.config.js (当需要有多个css文件引入时,需要用到webpack.config.js)

    做法:(1)在mywebpack文件夹下面新建webpack.config.js(名称一定是这个)

                (2)在webpack.config.js中写

    module.exports={
        //入口文件
        entry:"./app.js",
        //出口文件
        output:{
            path:__dirname,       //当前路径
            filename:"bundle.js"
        },
        //需要依赖的插件或者装载器
        module:{
            loaders:[
                {test:/.css$/,loader:"style-loader!css-loader"}
            ]
        }
    }

    然后app.js中需要修改:

    有原来的require("!style-loader!css-loader!./index.css")

    修改为:require("./index.css");

    重新执行webpack  app.js bundle.js --watch就可以啦

    优化一下:

    mywebpack下面创建src文件夹(js文件夹、css文件夹),可以把之前的app.js、people.js放入src下面的js文件夹中,其中对应的文件路径对应修改一下,可以删掉bundle.js文件,重新生成一下:

    webpack.config.js中变化:

    module.exports={
        //入口文件
        entry:"./src/js/app.js",
        //出口文件
        output:{
            path:__dirname+"/dist",
            filename:"bundle.js"       //在当前路径下创建dist文件夹,在dist文件夹下面创建bundle.js
        },
        //需要依赖的插件或者装载器
        module:{
            loaders:[
                {test:/.css$/,loader:"style-loader!css-loader"}
            ]
        }
    }

    修改其他文件对应的文件时,在当前文件下执行webpack就可以,不再是webpack app.js bundle.js --watch   因为路径发生了变化,执行webpack可以找到webpack.config.js,即一切顺理成章。

    再优化:可以在package.json文件夹中修改

    "scripts": {
        "test": "echo "Error: no test specified" && exit 1"
    },

     "scripts": {
        "build":"webpack"
      },

    这样在当前文件夹下面只需要执行npm run build就可以    不需要是webpack

    2.4 使用webpack-dev-server

    2.4.1 使用webpack-dev-server(可以搭建服务器,实时监听)

    其好处是可以将自己的项目在本地的服务器中去运行

    (1)首先安装

    npm install -g webpack-dev-server --save-dev

    (2)在package.json中修改添加start

    "scripts": {
          "start":"webpack-dev-server --entry .src/js/app.js --output-filename ./dist/bundle.js",
        "build":"webpack"
      },

    在当前文件夹下面执行 npm run build创建完项目,npm start 可以利用本地的服务器来监听做错

    2.4.2 使用babel转换插件(可以将es6语法转换成es5语法,)

    (1)安装babel

    npm install babel-core babel-loader babel-preset-es2015 --save-dev     (这里-es2015是你想要转换成的语言,这里是es5,babel-core是核心插件, babel-loader是装载器)

    (2)在webpack.config.js中配置

    module:{
            loaders:[
                {test:/.css$/,loader:"style-loader!css-loader"},
                {
                    test:/.js$/,loader:"babel-loader",
                    exclude:/node_modules/,    //除了这个文件
                    query:{                    //查询
                        preset:["es2015"]
                    }
                }
            ]
        }

    (3)重构项目   npm run build

    (4)npm start   运行

    (5)可以在bundle.js中看到已经将app.js中使用的es6语法修改为es5了。

  • 相关阅读:
    C++ 将对象写入文件 并读取
    IronPython fail to add reference to WebDriver.dll
    How to Capture and Decrypt Lync Server 2010 TLS Traffic Using Microsoft Tools
    .net code injection
    数学系学生应该知道的十个学术网站
    Difference Between Currency Swap and FX Swap
    Swift开源parser
    谈谈我对证券公司一些部门的理解(前、中、后台)[z]
    JDK8记FullGC时候Metaspace内存不会被垃圾回收
    JVM源码分析之JDK8下的僵尸(无法回收)类加载器[z]
  • 原文地址:https://www.cnblogs.com/wanan-01/p/8903691.html
Copyright © 2011-2022 走看看