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'});

 

posted @   Samve  阅读(188)  评论(0编辑  收藏  举报
编辑推荐:
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
阅读排行:
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 趁着过年的时候手搓了一个低代码框架
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!
点击右上角即可分享
微信分享提示