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

    1、安装:

    npm install webpack@3.0.0 -g

    2、执行命令 :

    webpack show.js bundle.js

    举例:

    一、js文件打包:

    str.js

    /*
    var weather = {
        str: "后天是什么天气"
    };
    */
    
    function outStr(str){
        return str;
    }
    
    module.exports = outStr;

    main.js

    /*var weather = require('./str.js');*/
    
    var funStr = require('./str.js');
    require('!style-loader!css-loader!./style.css');
    document.write(funStr('<div>how old are you!</div>'));

    二、样式文件打包:

    首先初始化生成package.json文件:

    npm init

    然后安装加载器:

    cnpm i css-loader@0.28 vue-style-loader@3.0.1

    引用文件:

    require('!style-loader!css-loader!./style.css');

    webpack打包:

    webpack show.js bundle.js

    str.js

    /*
    var weather = {
        str: "后天是什么天气"
    };
    */
    
    function outStr(str){
        return str;
    }
    
    module.exports = outStr;

    main.js

    /*var weather = require('./str.js');*/
    
    var funStr = require('./str.js');
    require('!style-loader!css-loader!./style.css');
    document.write(funStr('<div>how old are you!</div>'));

    三、手动修改配置文件webpack.config.js简化打包过程:

    webpack.config.js:

    module.exports = {
        entry: './src/js/main.js',
        output: {
            path: __dirname+'/dist',
            filename: 'bundle.js'
        },
        module: {
            loaders: [
                {
                    test: /.css$/,
                    loader: 'style-loader!css-loader'
                }
            ]
        }
    };

    str.js

    /*
    var weather = {
        str: "后天是什么天气"
    };
    */
    
    function outStr(str){
        return str;
    }
    
    module.exports = outStr;

    main.js

    /*var weather = require('./str.js');*/
    
    var funStr = require('./str.js');
    require('../css/style.css');
    document.write(funStr('<div>how old are you!</div>'));

    style.css

    div{
        background: #FF00FF;
        text-align: center;
        font-weight: bold;
    }

    文件夹目录如下:

    执行命令 :

    webpack

    四、手动通过终端安装方式,将第三方库直接打包:

    1、安装jquery:

    npm install jquery --save-dev

    2、main.js中引用:

    var funStr = require('./str.js');
    require('../css/style.css');
    var $ = require("jquery");
    document.write(funStr('<div>how old are you!</div>'));
    $("div").html("这是一个jquery库!").css({'background-color': "green", color: '#FFFFFF'});
  • 相关阅读:
    名言
    八猫图
    springMVC 上传下载文件
    mongdb 模糊查询
    tomcat结合nginx使用小结
    orale存储过程
    java执行效率低,但效率就低吗?
    Spring aop 原始的工作原理的理解
    spring aop一些名词的理解
    Spring控制反转(IOC)和依赖注入(DI),再记不住就去出家!
  • 原文地址:https://www.cnblogs.com/samve/p/9557122.html
Copyright © 2011-2022 走看看