一、所需文档
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命令会无效,我也不知道什么原因,正在学习中。
相关推荐
入门一 https://www.cnblogs.com/baqiphp/p/7647912.html 入门二 https://www.jianshu.com/p/71bbcdc8c1fc typescript配置说明 https://www.tslang.cn/docs/handbook/compiler-options.html eslint typescript配置...
这篇文章不是有关React和Webpack的教程,只是一篇能够让你快速上手使用目前这两种热门技术的前端指南,并假设你对两者有一个基本的认识。如果你想先行了解下React,可以放肆的移步至 React官方教程,如果你已经使用...
React + React-Router 4 + Redux + Ant Design + Webpack 4带有热重载和redux-devtools-extension入门 :warning_selector: Ant Design仍在升级到ReactJS 16.3新生命周期,因此,应用目前无法正常运行完整的Ant ...
react-webpack-example:基本示例react + babel + webpack
react结合webpack的入门示例
TypeScript + React + Webpack + Electron入门应用程序 具有React和Webpack的Electron上的简单TypeScript xample应用程序(支持热重装) 生产建立 npm i && npm run package 检出“ ./dist”文件夹。 开发模式 运行...
该入门工具包将hapi.js服务器与webpack dev服务器连接,并设置了React Hot Module Reloading。 非常基本的生产配置也已就绪。 您可以使用该入门工具包有效地开发可能与Hapi.js后端通信的React组件和应用程序。 ...
可部署的React + Webpack 2入门套件 React15 Webpack 2 React-hot-loader 3 萨斯 在开发模式下运行: npm run dev 在生产模式下运行: npm run build npm start 在部署之前,请确保通过npm run build生成了捆绑...
一个简单的最小化React入门工具包。 (React + Webpack + WebpackDevServer + ES6 + Babel + React热重装。) 以后需要添加更多模块。 ##安装npm install npm start 访问: http://localhost:3000/
BZ打算从从头开始,一步一步配置webpack,能够使用ES6+React组合开发,废话少说让我们一起来开始Webpack+ES6+React之旅。 可以在我的 中clone或者fork 当然你也可以使用本博文最后总结的部分或者从我的中获得,全部...
react_quickstart + + 入门的简单例子 用法 git clone cd npm install ./script/dev 最后一行运行http-server和webpack构建 在浏览器中加载
预算::可扩展的React,Redux,React Router 4,Webpack示例应用 生产就绪的React + Webpack架构已在世界上一些最成功的企业的消费者Web应用程序上实现。 感知的性能和开发经验是此设置中的关键因素。 您可以使用...
React启动器React + Reflux + Gulp & Webpack Build + Webpack Hot-Loading 的入门项目开始 npm install建造 npm run build发展 npm run dev开发应用程序初始化中有一个错误,通过进行更改并保存来修复它,这将触发...
小结放在前:这篇文章主要是为下一篇的react提前铺好路,webpack是一个前端资源模块化管理和打包工具,说白了就是方便我们管理自己的常用的一些代码,比如你开发中用到sass以及jade同时用到es6,开发时你不可能改动...
这是一篇给初学者的教程, 在这篇教程中我们将通过构建一个 Hacker News 的前端页面来学习 React 与 Webpack. 它不会覆盖所有的技术细节, 因此它不会使一个初学者变成大师, 但希望能给初学者一个大致印象.
背后的概念:此入门工具是一种易于理解的方法,可以方便地使用ReactJS(ES6)+ bootstrap + webpack入门工具,并具有以下功能: no hard core Webpack配置,因此更容易理解(它们是令人惊叹的webpack配置的众多...
...
资源名称:轻松入门React和Webpack 中文WORD版内容简介:React 一个组件,有自己的结构,有自己的逻辑,有自己的样式,会依赖一些资源,会依赖某些其他组件。 Webpack是一个打包工具,而不是像RequireJS或SeaJS这样...
React Webpack入门这是React 16和Webpack 4的样板。它包括webpack-dev-server和一个构建脚本。快速开始# Install dependenciesnpm install# Serve on localhost:3000npm start# Build for productionnpm run build...