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'});
  • 相关阅读:
    929. 独特的电子邮件地址
    [工具.tcp]测试TCP通讯的网络延迟
    [技巧.Dotnet]轻松实现“强制.net程序以管理员身份运行”。
    [问题记录.VisualStudio]VS2013无法新增和打开项目
    [问题记录.VisualStudio]TFS项目映射问题解决
    [问题记录.dotnet]取网卡信息报错"找不到"-WMI
    模型驱动的数学原理
    剑指OFFER 旋转数组的最小数字
    剑指OFFER 用两个栈实现队列
    剑指OFFER 按之字形顺序打印二叉树
  • 原文地址:https://www.cnblogs.com/samve/p/9557122.html
Copyright © 2011-2022 走看看