一、所需文档
1、webpack英文文档首页: https://webpack.github.io/
2、babel-loader github地址: https://github.com/babel/babel-loader
二、demo开始
1、请检查你的node.js的版本: node -v,如果低于4.0请更新至4.0以上
2、在磁盘上随便创建一个项目:我的是F:\webpack_workspace\test_second,
(1)npm install webpack -g 全局安装webpack
(2)到新建的test_second目录下,新建package.json。
(3)然后在该目录下执行npm init命令,一路回车,package.json增加了一些内容。
(4)npm install webpack --save-dev 基于本目录安装webpack,运行完该命令会在本录下出现node_modules的目录
(5)新建webpack.config.js 我的文件内容是
module.exports = { entry: "./main.js", output: { filename: "bundle.js" }, module: { loaders:[ { test: /\.css$/, loader: "style!css!" }, { test: /\.jsx?$/, exclude: /(node_modules|bower_components)/, loader: 'babel?presets[]=react,presets[]=es2015' }, ] } }
(6)在文档跟目录下新建index.html、main.js、test.jsx
index.html的内容为
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>学习了解webpack</title> </head> <body> <section id="test"></section> <script type="text/javascript" src="./bundle.js" ></script> </body> </html>
main.js的内容为:
import './css/style.css'; var $ = require('jquery'); var React = require('react'); var ReactDom = require('react-dom'); var AppComponent = require('./test.jsx'); ReactDom.render(<AppComponent />, document.getElementById('test'));
test.jsx的内容为:
var React = require('react'); var ProductBox = React.createClass({ render: function () { return ( <div className="productBox"> Hello World! </div> ); } }); module.exports = ProductBox;
style.css中的内容为:
body { background: goldenrod; }
(7)一切文件准备就绪后,我们该做点什么呢?由于jsx语法浏览器不认识,所以我们需要将jsx语法转换为浏览器所熟知的js语法,因此我们需要一些工具,这个工具的名字叫babel-loader,那么如何在webpack中使用它呢,babel-loader的git地址为:https://github.com/babel/babel-loader,通过文档可知,我们需要在本项目中加载babel-loader:
npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev
(8)由于main.js中require了jquery,所以我们也需要将jquery加载到本项目中
npm install jquery --save-dev
(9)在main.js中导入了style.css,那么需要相应的工具去解析它
npm install css-loader style-loader --save-dev
(10)require('react'), require('react-dom')同理也需要相应的工具
npm install react react-dom --save-dev
(11)
React.render()已废弃使用,用ReactDom.render()代替
(12)一切就绪后,在根目录下执行webpack命令,然后访问index.html
(13)如果想时时根据文件的变化而更新浏览器,怎么办呢?
npm install webpack-dev-server -g npm install webpack-dev-server --save-dev
(14)然后在根目录下运行wenpack-dev-server 访问http://localhost:8080/webpack-dev-server/index.html,以后更改main.js、style.css、test.jsx时都会时时刷新浏览器
(15)注意当入口文件不是项目的根目录,webpack-dev-server命令会无效,我也不知道什么原因,正在学习中。