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

 

转载于:https://www.cnblogs.com/samve/p/9557122.html