webpack的最简单应用,只使用js与css的打包

文章转载自:http://www.cnblogs.com/huangqiming/p/5961506.html


1、要确保node的版本是否是最新稳定版

2、接着需要packjson.js文件,全部enter掉就好了,默认值就行了

1
npm init

3、进行全局安装webpack

1
npm install -g webpack

4、cmd跳转到项目的文件夹,安装webpack

1
npm install --save-dev webpack

5、接着在项目文件夹接着安装,css-loader 和 style-loader处理样式表

1
npm install --save-dev style-loader css-loader

6、安装css中图片的loader和svg的依赖

1
npm install url-loader svg-url-loader --save-dev

7、在项目文件夹新建webpack.config.js,我的内容如下

var webpack = require('webpack');

module.exports = {
entry: __dirname+'/js/entry.js',
output: {
path: __dirname+'/js',
filename: 'bundle.js'
},
module: {
loaders: [
{test: /\.css$/,loader: 'style-loader!css-loader'},
{test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=8192'},
{test: /\.svg/, loader: 'svg-url-loader'}
]
}
};

8、在项目文件夹下的js文件夹里新建一个entry.js,我的内容如下(测试用的)

require('./../css/style.css'); // 载入 style.css
require('./index.js');//载入自身想要用的js

9、输出的网页的内容index.html,如下

1
2
3
4
5
6
7
8
9
<!-- index.html -->
<html>
<head>
   <meta charset= "utf-8" >
</head>
<body>
   <script src= "js/bundle.js" ></script>
</body>
</html>

10、最后在命令行cmd中输入webpack就可以自动打包了(但是要记得始终要在原始目录下)


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值