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