1,实现了web pack的基本用法,能打包应用,管理源码。
2,实现了css-loader,style-loader,json-loader的效果。
3,实现了web pack-dev-server的使用,能够实时刷新效果,这个很赞啊。
webpack.json
{
"name": "learnwebpack",
"version": "1.0.0",
"description": "学习webpack",
"main": "index.js",
"scripts": {
"start": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "灵眼儿上方",
"license": "ISC",
"devDependencies": {
"css-loader": "^0.27.3",
"json-loader": "^0.5.4",
"style-loader": "^0.13.2",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.2"
}
}
web pack.config.js
/**webpack配置文件
* Created by liyanq on 17/3/14.
* Webpack拥有很多其它的比较高级的功能(比如说本文后面会介绍的loaders和plugins);
* 这些功能其实都可以通过命令行模式实现,但是正如已经提到的,这样不太方便且容易出错的.
* 一个更好的办法是定义一个配置文件,这个配置文件其实也是一个简单的JavaScript模块,
* 可以把所有的与构建相关的信息放在里面
* Loaders是webpack中最让人激动人心的功能之一了。
* 通过使用不同的loader,webpack通过调用外部的脚本或工具可以对各种各样的格式的文件进行处理,
* 比如说分析JSON文件并把它转换为JavaScript文件,或者说把下一代的JS文件(ES6,ES7)转换为现代浏览器可以识别的JS文件。
* 或者说对React的开发而言,合适的Loaders可以把React的JSX文件转换为JS文件。
* Loaders需要单独安装并且需要在webpack.config.js下的modules关键字下进行配置,Loaders的配置选项包括以下几方面:
* test:一个匹配loaders所处理的文件的拓展名的正则表达式(必须)
* loader:loader的名称(必须)
* include/exclude:手动添加必须处理的文件(文件夹)或屏蔽不需要处理的文件(文件夹)(可选);
* query:为loaders提供额外的设置选项(可选)
*/
/**
* */
var webpack = require("webpack");
module.exports = {
devtool: "source-map",//调试的时候使用
entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"//打包后输出文件的文件名,可以写成"[name]-[hash].js"
},
module: {
loaders: [{
test: /\.json$/,
loader: "json-loader"
},{
test: /\.css$/,
loader: "style-loader!css-loader"
}]
},
devServer: {//配置webpack-dev-server选项
contentBase: "./public",//本地服务器所加载的页面所在的目录。
//效果和webpack-dev-server --content-base ./public一样~
historyApiFallback: true,//不跳转
inline: true//实时刷新
},
plugins: [
new webpack.BannerPlugin("Copyright Flying Unicorns inc.")//在这个数组中new一个就可以了
]
};
./app/greeter.js
/**
* Created by liyanq on 17/3/14.
*/
var jsonFile = require("./hello.json");
module.exports = function() {
var greet = document.createElement('div');
greet.textContent = jsonFile["greetingText"];
var h1 = document.createElement("h1");
h1.innerHTML = "g来自服务器的自动更新";
h1.className = "h1";
greet.appendChild(h1);
return greet;
};
./app/hello.json
{
"greetingText":"我是来自json文件的问候语"
}
./app/main.js
/**
* Created by liyanq on 17/3/14.
*/
var greeter = require('./Greeter.js');
var cssFile = require("./testCssFile.css");
document.getElementById('root').appendChild(greeter());
./app/testCssFile.css
body{
background-color: burlywood;
}
.h1{
color: blue;
}
./public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试webpack</title>
</head>
<body>
<div id="root">
</div>
<script src="bundle.js"></script>
</body>
</html>
还有许多功能没试验,如loaders,babel,plugin,react,jsx,es6...
来源:http://blog.csdn.net/kun5706947/article/details/52596766