1、首先安装webpack命令
$ npm install webpack -g
2、创建一个项目：项目名称 webpack，创建成功后cd 进入项目的根目录，该命令创建了整个项目的配置文件，package.json
$ npm init
3、添加webpack的依赖包
"devDependencies": {
"jsx-loader": "^0.12.2",
"css-loader": "^0.15.0",
"style-loader": "^0.12.4",
"react-hot-loader": "^1.1.1",
"webpack": "^1.5.1",
"webpack-dev-server": "1.6.4"
},
这些包中的loader是对不同文件格式进行打包的支持。
4、安装依赖包
$ npm install
5、新建相关文件和目录
根目录下新建一个src文件夹
在src文件夹中建立项目的入口文件：index.js
//index.js
const React = require('react');
const ReactDom = require('react-dom');
const View = require('./content');
ReactDom.render(,document.body);
在index.js同根目录下，建立content.js来写react组件
//content.js
const React = require('react');
class View extends React.Component{
render(){
return
<p> 看看有没有内容</P>
}
}
module.exports = View;
6、配置webpack，在根目录下新建一个webpack.config.js，对webpack进行配置
//webpack.config.js
var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
module.exports = {
//插件项
plugins: [commonsPlugin],
//页面入口文件配置
entry: { index : './src/index.js' },
//入口文件输出配置
output: { path: './lib/', filename: '[name].js' },
module: {
//加载器配置
loaders: [ { test: /\.js$/, loader: 'jsx-loader?harmony' } ] },
//其它解决方案配置
resolve: {
extensions: ['', '.js', '.json', '.scss'],
alias: { AppStore : 'js/stores/AppStores.js',
ActionType : 'js/actions/ActionType.js',
AppAction : 'js/actions/AppAction.js' }
}
};
页面入口文件就是项目的入口文件，入口文件输出配置是对打包之后的文件的保存位置，这里放到了/lib/文件夹下，如果没有该文件夹，则自动创建
7、打包：
$ webpack -w
如果上面的命令不带参数的话，则每修改一次文件，就要手动执行以下这个命令
打包完成之后项目的根目录就会出现一个lib的文件夹，文件夹里面有一个index.js，就是配置中的入口文件。path是输出路径，filename是输出名字，[name]是原名输出，也可以指定为一个固定的名字。
8、打包好之后，在根目录下新建index.html文件
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript" src="./lib/common.js" charset="utf-8"></script>
<script type="text/javascript" src="./lib/index.js charset="utf-8"></script>
</body>
</html>
9、双击运行index.html文件
网友评论