脚本宝典收集整理的这篇文章主要介绍了

快速搭建 webpack + react 环境

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h2 id="articleHeader0">安装</h2> <p>首先你需要<a href="http://nodejs.cn/download/" rel="nofollow noreferrer" target="_blank">点击这里</a>安装 <a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a>js(npm)。然后执行:</p> <p>建立一个目录作为项目根目录并初始化:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="mkdir react-webpack cd react-webpack/ npm init" title="" data-original-title="复制"></span> </div> </p></div> <pre class="shell hljs"><code class="shell">mkdir react-webpack cd react-webpack/ npm <a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a>it</code></pre> <p>安装相关组件</p> <p>这里包括了本文所需要的全部组件</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm i --save-dev react react-dom react-transform-hmr webpack webpack-dev-server babel-core babel-loader babel-preset-react babel-preset-es2015 babel-plugin-react-transform css-loader style-loader less less-loader react-transform-catch-errors redbox-react --registry=https://registry.npm.taobao.org" title="" data-original-title="复制"></span> </div> </p></div> <pre class="shell hljs"><code class="shell" style="word-break: break-word; white-space: initial;">npm i --save-dev react react-<a href="http://www.js-code.com/tag/do" title="浏览关于“do”的文章" target="_blank" class="tag_link">do</a>m react-trans<a href="http://www.js-code.com/tag/form" title="浏览关于“form”的文章" target="_blank" class="tag_link">form</a>-hmr webpack webpack-dev-server <a href="http://www.js-code.com/tag/babel" title="浏览关于“babel”的文章" target="_blank" class="tag_link">babel</a>-core babel-loader babel-p<a href="http://www.js-code.com/tag/reset" title="浏览关于“reset”的文章" target="_blank" class="tag_link">reset</a>-react babel-preset-es2015 babel-<a href="http://www.js-code.com/tag/plugin" title="浏览关于“plugin”的文章" target="_blank" class="tag_link">plugin</a>-react-trans<a href="http://www.js-code.com/tag/for" title="浏览关于“for”的文章" target="_blank" class="tag_link">for</a>m css-loader style-loader less less-loader react-transform-<a href="http://www.js-code.com/tag/catch" title="浏览关于“catch”的文章" target="_blank" class="tag_link">catch</a>-errors redbox-react --regis<a href="http://www.js-code.com/tag/try" title="浏览关于“try”的文章" target="_blank" class="tag_link">try</a>=https://registry.npm.taobao.org</code></pre> <p>下面简单说明上述组件功能</p> <ol> <li>react: react基础组件</li> <li>react-<a href="http://www.js-code.com/tag/do" title="do" target="_blank">do</a>m: react 操作 <a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a> 组件</li> <li>react-trans<a href="http://www.js-code.com/tag/for" title="for" target="_blank">for</a>m-hmr: hot module reload<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>g 为热替换依赖插件</li> <li>webpack: webpack 基础组件</li> <li>webpack-dev-server: webpack 服务器组件</li> <li><a href="http://www.js-code.com/tag/babel" title="babel" target="_blank">babel</a>-core: <a href="http://www.js-code.com/tag/babel" title="babel" target="_blank">babel</a> 核心组件</li> <li>babel-loader: 转码工具</li> <li>babel-p<a href="http://www.js-code.com/tag/reset" title="reset" target="_blank">reset</a>-react: 支持 react 转码</li> <li>babel-p<a href="http://www.js-code.com/tag/reset" title="reset" target="_blank">reset</a>-es2015: 支持 ES6 转码</li> <li>babel-<a href="http://www.js-code.com/tag/plugin" title="plugin" target="_blank">plugin</a>-react-trans<a href="http://www.js-code.com/tag/form" title="form" target="_blank">form</a>: 实现 babel 热替换</li> <li>css-loader: 对 css 文件进行打包</li> <li>style-loader: 将样式添加进 <a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a> 中</li> <li>less: less 语法支持</li> <li>less-loader: 对 less 文件进行打包</li> <li>react-trans<a href="http://www.js-code.com/tag/for" title="for" target="_blank">for</a>m-<a href="http://www.js-code.com/tag/catch" title="catch" target="_blank">catch</a>-errors: 将错误显示在浏览器中</li> <li>redbox-react: 渲染插件,配合上一个使用显示错误</li> </ol> <h2 id="articleHeader1">hello world</h2> <p>建立如下目录结构(图中不包括 <a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a>_modules 目录,实际项目中必须保留,下同)</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000016330991?w=178&amp;h=182" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="这里写图片描述" title="这里写图片描述" style="cursor: pointer;"></span></p> <p>其中 webpack.config.js 内容如下</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="var path = require('path'); var webpack = require('webpack'); module.exports = { devtool: 'eval-source-map', //开启 soursemap entry: path.resolve(__dirname, './src/index.js'), //指定入口 output: { //设置输出路径 path: path.resolve(__dirname, './build'), filename: &quot;index.js&quot; }, module: { //设置 babel 模块 loaders: [{ test: /.(js|jsx)$/, exclude: /node_modules/, loader: &quot;babel-loader&quot; }] }, plugins: [ //加载插件 new webpack.HotModuleReplacementPlugin() //热模块替换插件 ] };" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-keyword"><a href="http://www.js-code.com/tag/var" title="浏览关于“var”的文章" target="_blank" class="tag_link">var</a></span> path = <span class="hljs-built_in">require</span>(<span class="hljs-string">'path'</span>); <span class="hljs-keyword">var</span> webpack = <span class="hljs-built_in">require</span>(<span class="hljs-string">'webpack'</span>); <span class="hljs-built_in">module</span>.<a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a>s = { <span class="hljs-attr">devtool</span>: <span class="hljs-string">'<a href="http://www.js-code.com/tag/eval" title="浏览关于“eval”的文章" target="_blank" class="tag_link">eval</a>-source-map'</span>, <span class="hljs-comment">//开启 soursemap</span> entry: path.resolve(__dir<a href="http://www.js-code.com/tag/name" title="浏览关于“name”的文章" target="_blank" class="tag_link">name</a>, <span class="hljs-string">'./src/index.js'</span>), <span class="hljs-comment">//指定入口</span> output: { <span class="hljs-comment">//设置输出路径</span> path: path.resolve(__dirname, <span class="hljs-string">'./build'</span>), <span class="hljs-attr">filename</span>: <span class="hljs-string">"index.js"</span> }, <span class="hljs-attr">module</span>: { <span class="hljs-comment">//设置 babel 模块</span> loaders: [{ <span class="hljs-attr">test</span>: <span class="hljs-regexp">/.(js|jsx)$/</span>, <span class="hljs-attr">exclude</span>: <span class="hljs-regexp">/<a href="http://www.js-code.com/tag/node" title="浏览关于“node”的文章" target="_blank" class="tag_link">node</a>_modules/</span>, <span class="hljs-attr">loader</span>: <span class="hljs-string">"babel-loader"</span> }] }, <span class="hljs-attr">plugins</span>: [ <span class="hljs-comment">//加载插件</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/new" title="浏览关于“new”的文章" target="_blank" class="tag_link">new</a></span> webpack.HotModuleReplacementPlugin() <span class="hljs-comment">//热模块替换插件</span> ] };</code></pre> <p>其中 .babelrc 内容如下:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="{ &quot;presets&quot;: [ &quot;react&quot;, &quot;es2015&quot; ] }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="json hljs"><code class="json">{ <span class="hljs-attr">"presets"</span>: [ <span class="hljs-string">"react"</span>, <span class="hljs-string">"es2015"</span> ] }</code></pre> <p>其中 src/<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>dex.js 内容如下:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="<a href="http://www.js-code.com/tag/import" title="import" target="_blank">import</a> <a href="http://www.js-code.com/tag/react" title="React" target="_blank">React</a> from 'react';<br /> <a href="http://www.js-code.com/tag/import" title="import" target="_blank">import</a> <a href="http://www.js-code.com/tag/react" title="React" target="_blank">React</a><a href="http://www.js-code.com/tag/dom" title="浏览关于“DOM”的文章" target="_blank" class="tag_link">DOM</a> from 'react-<a href="http://www.js-code.com/tag/do" title="do" target="_blank">do</a>m';</p> <p><a href="http://www.js-code.com/tag/react" title="浏览关于“React”的文章" target="_blank" class="tag_link">React</a>DOM.render(</p> <h1>Hello World</h1> <p>,<br /> document.getElementById('root')<br /> );" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code class="jsx"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>; <span class="hljs-keyword">import</span> ReactDOM <span class="hljs-keyword">from</span> <span class="hljs-string">'react-dom'</span>; ReactDOM.render( <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>Hello World<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span></span>, <span class="hljs-built_in"><a href="http://www.js-code.com/tag/document" title="浏览关于“document”的文章" target="_blank" class="tag_link">document</a></span>.getElementById(<span class="hljs-string">'root'</span>) );</code></pre> <p>其中 build/index.html 内容如下:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="<!DOCTYPE html><br /> <html lang=&quot;zh-CN&quot;><br /> <head><br /> <meta charset=&quot;UTF-8&quot; /><br /> <title>demo</title><br /> </head><br /> <body></p> <div id=&quot;root&quot;></div> <p></body><br /> <script src=&quot;index.js&quot;></script><br /> </html>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"zh-CN"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr"><a href="http://www.js-code.com/tag/char" title="浏览关于“char”的文章" target="_blank" class="tag_link">char</a>set</span>=<span class="hljs-string">"UTF-8"</span> /&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>demo<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">id</span>=<span class="hljs-string">"root"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"index.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></code></pre> <p>修改 <a href="http://www.js-code.com/tag/package" title="package" target="_blank">package</a>.json 中的 scripts 部分如下:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="&quot;scripts&quot;: { &quot;build&quot;: &quot;webpack&quot; }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-string">"scripts"</span>: { <span class="hljs-string">"build"</span>: <span class="hljs-string">"webpack"</span> }</code></pre> <p>而后运行 'npm run build' 运行在本地 './build/index.html' 看到渲染的页面</p> <h2 id="articleHeader2">服务器环境配置</h2> <p>修改或添加 webpack.config.js 中以下部分:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="entry: ['webpack/hot/dev-server', path.resolve(__dirname, './src/index.js')], //指定入口 devServer: { //配置本地服务器 contentBase: './build', colors: true, historyApiFallback: true, inline: false, port: 4444, process: true }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js">entry: [<span class="hljs-string">'webpack/hot/dev-server'</span>, path.resolve(__dirname, <span class="hljs-string">'./src/index.js'</span>)], <span class="hljs-comment">//指定入口</span> devServer: { <span class="hljs-comment">//配置本地服务器</span> contentBase: <span class="hljs-string">'./build'</span>, <span class="hljs-attr">colors</span>: <span class="hljs-literal"><a href="http://www.js-code.com/tag/true" title="浏览关于“true”的文章" target="_blank" class="tag_link">true</a></span>, <span class="hljs-attr"><a href="http://www.js-code.com/tag/history" title="浏览关于“history”的文章" target="_blank" class="tag_link">history</a>ApiF<a href="http://www.js-code.com/tag/all" title="浏览关于“all”的文章" target="_blank" class="tag_link">all</a>back</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">inline</span>: <span class="hljs-literal"><a href="http://www.js-code.com/tag/false" title="浏览关于“false”的文章" target="_blank" class="tag_link">false</a></span>, <span class="hljs-attr">port</span>: <span class="hljs-number">4444</span>, <span class="hljs-attr">process</span>: <span class="hljs-literal">true</span> }</code></pre> <p>修改 <a href="http://www.js-code.com/tag/package" title="package" target="_blank">package</a>.json 中的 scripts 部分如下:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="&quot;scripts&quot;: { &quot;build&quot;: &quot;webpack&quot;, &quot;dev&quot;: &quot;webpack-dev-server&quot; } 而后运行 'npm run dev' 运行在本地 'http://localhost:4444/' 看到渲染的页面 ## 配置 css 和 less 在 ./src/ 中添加 index.less 和 font.css,分别写入以下内容测试功能 " title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-string">"scripts"</span>: { <span class="hljs-string">"build"</span>: <span class="hljs-string">"webpack"</span>, <span class="hljs-string">"dev"</span>: <span class="hljs-string">"webpack-dev-server"</span> } 而后运行 <span class="hljs-string">'npm run dev'</span> 运行在本地 <span class="hljs-string">'http://localhost:4444/'</span> 看到渲染的页面 ## 配置 css 和 less 在 ./src/ 中添加 index.less 和 font.css,分别写入以下内容测试功能 </code></pre> <p>/<em> index.less </em>/<br />h1 {<br /> background-color: red;<br />}<br />/<em> font.css </em>/<br />h1 {<br /> color: yellow;<br />}</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" 修改 webpack.config.js 部分: " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code> 修改 <span class="hljs-selector-tag">webpack</span><span class="hljs-selector-class">.config</span><span class="hljs-selector-class">.js</span> 部分: </code></pre> <p>module: { //设置 babel 模块<br /> loaders: [{</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="test: /.(js|jsx)$/, exclude: /node_modules/, loader: &quot;babel-loader&quot;" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code><span class="hljs-string">test:</span> <span class="hljs-regexp">/.(js|jsx)$/</span>, <span class="hljs-string">exclude:</span> <span class="hljs-regexp">/node_modules/</span>, <span class="hljs-string">loader:</span> <span class="hljs-string">"babel-loader"</span></code></pre> <p>},{</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="test: /.css$/, loader: 'style-loader!css-loader'" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code><span class="hljs-string">test:</span> <span class="hljs-regexp">/.css$/</span>, <span class="hljs-string">loader:</span> <span class="hljs-string">'style-loader!css-loader'</span></code></pre> <p>},{</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="test: /.less$/, loader: 'style-loader!css-loader!less-loader'" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code><span class="hljs-string">test:</span> <span class="hljs-regexp">/.less$/</span>, <span class="hljs-string">loader:</span> <span class="hljs-string">'style-loader!css-loader!less-loader'</span></code></pre> <p>}]<br />}</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" 修改 src/index.js 如下:" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs fortran"><code> 修改 src/<span class="hljs-built_in">index</span>.js 如下:</code></pre> <p>import React from 'react';<br />import ReactDOM from 'react-dom';<br />import './font.css';<br />import './index.less';</p> <p>ReactDOM.render(<br /> &lt;h1&gt;Hello World&lt;/h1&gt;,<br /> <a href="http://www.js-code.com/tag/document" title="document" target="_blank">document</a>.getElementById('root')<br />);</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" 然后重启运行(由于修改了 webpack.config.js,不能使用热替换)页面可以看到相关样式" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code> 然后重启运行(由于修改了 <span class="hljs-selector-tag">webpack</span><span class="hljs-selector-class">.config</span><span class="hljs-selector-class">.js</span>,不能使用热替换)页面可以看到相关样式</code></pre> <p></code></p>

总结

以上是脚本宝典为你收集整理的

快速搭建 webpack + react 环境

全部内容,希望文章能够帮你解决

快速搭建 webpack + react 环境

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过