(1) webpack相关
webpack介绍
webpack介绍
webpack配置说明
(2) webpack，webpack-dev-server的安装
- webpack-dev-server是一个小型的Node.js Express服务器,
它使用webpack-dev-middleware来服务于webpack的包,除此自外，它还有一个通过Sock.js来连接到服务器的微型运行时
(1) 开始前还是万万不能缺少的安装：全局安装webpack
npm install webpack -g
(2) 安装完接着进入项目根目录，新建一个package.json依赖管理文件
npm init //填写相关内容
(3) 在项目根目录下安装我们的webpack
npm install webpack --save-dev
------------------------
npm install webpak-dev-server --save-dev
//--save-dev 的意思是将这个安装过程记录到我们的package.json依赖管理文件里
(4) 完后新建一个名为webpack.config.js的文件
- webpack的配置文件，就是一个配置项，告诉 webpack 它需要做什么。
(5) 在webpack.config.js文件中引入webpack和webpack-dev-server
var webpack = require('webpack');
详细代码如下：
webpack.config.js文件如下：
----------------------------------
var webpack = require('webpack');
var path = require('path'); //path是node命令
module.exports = {
entry: "./app/index.js", //入口文件
output: { //打包完成后的输出文件
path: path.resolve(__dirname, './dist'), //要使用相对路径，需要用引用path.resove,记得要先require
filename: 'bundle.js'
}
}
- 在入口html中引入打包好的bundle.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack-react-product</title>
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="dist/bundle.js"></script>
</body>
</html>
截图
- 常用的loader
如：Babel-loader , css-loader , less-loader
http://webpack.github.io/docs/using-loaders.html
常用的loader
番外篇
--save-dev和--save的区别
- --save-dev：开发的时候用，正式上线的时候不用。（dev是development开发意思）
- --sava：开发时候用，上线的时候也要用。
例如：开发时的依赖和（开发上线都用的依赖）
"devDependencies": {
"webpack": "^3.5.5",
"webpack-dev-server": "^2.7.1"
}, //开发时候的依赖
"dependencies": {
"react": "^15.6.1",
"react-dom": "^15.6.1"
} //开发和上线都会使用的依赖
http://www.jianshu.com/p/237260271dc8
总结
webpack打包生成bundle.js后在index.html中引用，输出hellow word的完整例子
- (1) webpack.config.js 即webpack的配置文件
var path = require('path'); //node自带的模块
var webpack = require('webpack'); //引入webpack
module.exports = {
entry: './app/index', //表示入口文件
output: {
path: path.resolve(__dirname, './dist'), //打包到哪个文件夹
filename: 'bundle.js' //打包完成后的文件名
}
} //这里还没用到module的loaders
- (2) 现在在dist文件夹中已经有了打包好的bundle.js文件，现在把他引入index.html中
index.html
-------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>reac-music-player</title>
</head>
<body>
<div id="root">
<p>helow world</p>
</div>
<script type="text/javascript" src="./dist/bundle.js"></script>
</body>
</html>
- (3)例子的完整目录结构
完整的目录结构
(2) webpack-dev-server小型的Node Express服务器
- webpack-dev-server是一个小型的Node.js Express服务器,
它使用webpack-dev-middleware来服务于webpack的包,除此自外，它还有一个通过Sock.js来连接到服务器的微型运行时
(一) 总结来说webpack-dev-server的作用主要有liang'g'ge：
(1) 搭建本地服务器
(2) 自动刷新
网友评论