初学webpack与react
刚接触webpack,在网上看了些入门的教程和资料,在此作下记录。 什么是webpack?简单说就是模块加载器,本文不作过多的介绍。 安装webpack首先确保你的机器已经安装了Node.js和npm(安装方式请参考其他相关资料)。 项目目录
package.json 我们会使用 Webpack 在我们的 /app 里来自动创建 bundle.js 。接下来,我们来设置 webpack.config.js。 设置webpackwebpack.config.js文件设置 var path = require('path'); module.exports = { entry: path.resolve(__dirname,'app/main.js'),output: { path: path.resolve(__dirname,'build'),filename: 'bundle.js',},};
运行一个HelloWorld demo经过上述的配置,我们已经有了一个最简单的配置了,下面我们用它来编译一个简单的Hello World。
'use strict'; module.exports = function () { var element = document.createElement('h1'); element.innerHTML = 'Hello world'; return element; };
'use strict'; var component = require('./component.js'); document.body.appendChild(component()); 然后在你的命令行运行
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> </head> <body> <script src="bundle.js"></script> </body> </html> 我们在index.html中引入刚才编译好的bundle.js,我们可以打开 index.html,在浏览器中预览一下效果。 设置 package.json scripts
"scripts": { "build": "webpack" } 现在你可以输入 开始工作流每次编译都需要输入 设置webpack-dev-server第一步需要安装
{ "scripts": { "build": "webpack","dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build" } } 配置完成后,我们可以在命令行里运行 让浏览器自动刷新当运行
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> </head> <body> <script src="http://localhost:8080/webpack-dev-server.js"></script> <script src="bundle.js"></script> </body> </html> 我们需要增加一个脚本当发生改动的时候去自动刷新应用,你需要在配置中增加一个入口点。 var path = require('path'); module.exports = { entry: ['webpack/hot/dev-server',path.resolve(__dirname,'app/main.js')],};
就是这样!现在你的应用就可以在文件修改之后自动刷新了。 模块Webpack 允许你使用不同的模块类型,但是 “底层”必须使用同一种实现。所有的模块可以直接在盒外运行。 ES6 模块 import MyModule from './MyModule.js'; CommonJS var MyModule = require('./MyModule.js'); AMD define(['./MyModule.js'],function (MyModule) { }); 理解文件路径一个模块需要用它的文件路径来加载,看一下下面的这个结构: --app 打开 main.js 然后可以通过下面两种方式引入 app/modules/MyModule.js
// ES6 import MyModule from './modules/MyModule.js'; // CommonJS var MyModule = require('./modules/MyModule.js'); 最开始的
// ES6 相对路径 import utils from './../utils.js'; // ES6 绝对路径 import utils from '/utils.js'; // CommonJS 相对路径 var utils = require('./../utils.js'); // CommonJS 绝对路径 var utils = require('/utils.js'); 相对路径是相对当前目录。绝对路径是相对入口文件,这个案例中是 main.js。 安装ReactJs在命令行在输入 在代码中使用 ReactJS
import React from 'react'; export default class Hello extends React.Component { render() { return <h1>Hello world</h1>; } }
import React from 'react'; import Hello from './component.jsx'; main(); function main() { React.render(<Hello />,document.getElementById('app')); }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> </head> <body> <div id="app"></div> <script src="http://localhost:8080/webpack-dev-server.js"></script> <script src="bundle.js"></script> </body> </html> 转换 JSX为了能够使用 JSX 语法,你需要用 Webpack 来转码你的 JavaScript,这是加载器的工作,我们可以使用一个很好用也有很多功能的 Babel。 npm install babel-loader --save-dev 现在我们需要去配置 Webpack 来使用加载器。
var path = require('path'); var config = { entry: ['webpack/hot/dev-server',path.resolve('',output: { path: path.resolve(__dirname,filename: 'bundle.js' },module: { loaders: [{ test: /.jsx?$/,// 用正则来匹配文件路径,这段意思是匹配 js 或者 jsx loader: 'babel' // 加载模块 "babel" 是 "babel-loader" 的缩写 }] } }; module.exports = config; 在命令行中运行 优化重合并你可能注意到在引入 React JS 到你的项目之后,给你的应用重新合并会花费太多的时间。在开发环境中,最理想的是编译最多 200 到 800 毫秒的速度,取决于你在开发的应用。
var path = require('path'); var node_modules = path.resolve(__dirname,'node_modules'); var pathToReact = path.resolve(node_modules,'react/dist/react.min.js'); config = { entry: ['webpack/hot/dev-server',resolve: { alias: { 'react': pathToReact } },module: { loaders: [{ test: /.jsx?$/,loader: 'babel' }],noParse: [pathToReact] } }; module.exports = config; 我们在配置中做了两件事: 加载CSSWebpack允许像加载任何代码一样加载 CSS。你可以选择你所需要的方式,但是你可以为每个组件把所有你的 CSS 加载到入口主文件中来做任何事情。
var path = require('path'); var config = { entry: ['webpack/hot/dev-server',module: { loaders: [{ test: /.jsx$/,loader: 'jsx' },{ test: /.css$/,// Only .css files loader: 'style!css' // Run both loaders }] } }; module.exports = config; 加载 CSS 文件
import './main.css'; // Other code
import './Component.css'; import React from 'react'; export default React.createClass({ render: function () { return <h1>Hello world!</h1> } }); 将所有CSS合并成一个
import './project-styles.css'; // 其他 JS 代码 CSS 就完全包含在合并的应用中,再也不需要重新下载。
import './style.css'; // 其他 JS 代码
import './style.css'; // 其他 JS 代码
import './style.css'; // 其他 JS 代码 你把你的模块用文件夹分离,每个文件夹有各自的 CSS 和 JavaScript 文件。再次,当应用发布的时候,导入的 CSS 已经加载到每个入口文件中。
.MyComponent-wrapper { background-color: #EEE; }
import './MyComponent.css'; import React from 'react'; export default React.createClass({ render: function () { return ( <div className="MyComponent-wrapper"> <h1>Hello world</h1> </div> ) } }); 使用内联样式取代 CSS 文件
import React from 'react'; var style = { backgroundColor: '#EEE' }; export default React.createClass({ render: function () { return ( <div style={style}> <h1>Hello world</h1> </div> ) } }); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |