在window7下进行,且系统已经装有node v0.10.35
1.创建一个文件夹webpack(名称自己定)
2.npm install webpack -g/npm i webpack -g,
(我这里是装载全局,也可以装在项目中)
3.npm init
用node建package.json文件,默认有如下字段:(也可以手动创建这个json)
{
"name": "webpack-test",
"version": "0.0.1",
"main": "index.js",
"scripts": {
"start": "webpack ./index.js bundle.js"
},
"description": ""
}
4.创建index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
5.创建index.js
console.log('it works!');
6.在命令行运行npm start,结果如下图:并且会在webpack/目录下生成一个bundle.js文件
7.在浏览器里面跑index.html,可以看到:
8.将index.js改成:
console.log(require('./tiger.js')+'it works!');
9.创建tiger.js
module.exports='tiger!';
10npm start
11.npm install css-loader style-loader --save-dev
安装能载入css的组件,这两个组件不能要到全局,否则就用不了,因此后面不加-g,运行这个命令将会在node-modules文件夹下面生成:css-loader和style-loader两个文件夹
12.创建style.css
body{
background-color: green;
}
13.修改tiger.js
require('style!css!./style.css');
module.exports='tiger!';
14.npm start 并运行index.html结果如图: