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

在 APICloud 项目中使用 Webpack

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h1 id="articleHeader0">前言</h1> <p>最近项目所需,所以开始学习并且使用 <a href="http://www.js-code.com/tag/api" title="API" target="_blank">API</a>Cloud 此款 hybrid APP 开发框架。粗略的看了下文档和部分 Demo 后,已经对 <a href="http://www.js-code.com/tag/api" title="API" target="_blank">API</a>Cloud 开发有一定基础的了解。在这种过程令我有一点疑惑,<a href="http://www.js-code.com/tag/api" title="浏览关于“API”的文章" target="_blank" class="tag_link">API</a>Cloud 的开发流程和普通的 Web APP 开发其实是很相似的,但是却没有对目前主流的构建工具有先关的教程。我发现虽然官方提供了一个 apicloud-polyfill 的功能,但是只是为了解决在项目中使用 ES6 的问题,而且整个 demo 的开发体验并不好,每次修改代码需要不停的构建在增量更新。随着项目的复杂起来,以及对一些前端新特性的依赖,所以我打算自己动手弄一个适合 APICloud 使用的 Webpack 模板。</p> <h1 id="articleHeader1">项目结构</h1> <p>APICloud 的开发模式其实就是以前的使用 <a href="http://www.js-code.com/tag/jquery" title="jQuery" target="_blank">jQuery</a> 的 MPA 开发一样,而且官方不推荐使用 SPA 的开发模式。</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="|- dist |- lanuch |- src |- pages |- Foo |- index.js |- index.html |- image |- css |- scripts |- index.js |- index.html |- package.json |- config.xml |- webpack.config.json |- .babelrc |- .gitignore |- .syncignore |- index.html" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs ruby"><code><span class="hljs-params">|- dist |</span>- lanuch <span class="hljs-params">|- src |</span>- pages <span class="hljs-params">|- Foo |</span>- <a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a>dex.js <span class="hljs-params">|- index.html |</span>- <a href="http://www.js-code.com/tag/image" title="浏览关于“image”的文章" target="_blank" class="tag_link">image</a> <span class="hljs-params">|- css |</span>- scripts <span class="hljs-params">|- index.js |</span>- index.html <span class="hljs-params">|- <a href="http://www.js-code.com/tag/package" title="浏览关于“package”的文章" target="_blank" class="tag_link">package</a>.json |</span>- config.xml <span class="hljs-params">|- webpack.config.json |</span>- .<a href="http://www.js-code.com/tag/babel" title="浏览关于“babel”的文章" target="_blank" class="tag_link">babel</a>rc <span class="hljs-params">|- .gitignore |</span>- .syncignore <span class="hljs-params">|- index.html</span></code></pre> <p>上面是我个人对 APICloud 项目的文件夹分类。所有的源码都存放在 src 文件夹内,Webpack 打包的主要目录也是 src。</p> <p>这里规定了每一个单独的 <a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a> 页面都是需要一个 JavaScript 的入口文件,这也是为了使用 Webpack 进行多页面打包的基础。</p> <h1 id="articleHeader2">Webapck 基础配置文件</h1> <p>在设定好目录结构之后,我们需要开始编写 Webpack 的 config 文件,配置相对来首都比较简单,所以我们就写在一个文件内既可。</p> <p><strong>webpack.config.js</strong></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="const path = require('path') const webpack = require('webpack') const HtmlWebpackPlugin = require('html-webpack-plugin') const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin') const glob = require('glob') const paths = {} const configs = [] const setPath = (item, type) => {<br /> const dirname = path.dirname(item)</p> <p> if (paths[dirname]) {<br /> paths[dirname][type] = item<br /> } else {<br /> paths[dirname] = {<br /> [type]: item<br /> }<br /> }<br /> }</p> <p>glob.sync('./src/**/*.js', { ignore: './src/script/*.js' }).forEach(item => setPath(item, 'script'))<br /> glob.sync('./src/**/*.html').forEach(item => setPath(item, 'html'))</p> <p>Object.keys(paths).forEach(key => {<br /> const distName = key.replace('src', 'dist')</p> <p> configs.push({<br /> entry: paths[key].script,<br /> output: {<br /> filename: '[name].bundle.js',<br /> path: path.resolve(__dirname, distName)<br /> },<br /> devtool: process.env.NODE_ENV === 'production' ? 'inline-source-map' : '#source-map',<br /> devServer: {<br /> host: '0.0.0.0',<br /> port: 8080,<br /> historyApiFallback: false,<br /> noInfo: true<br /> },<br /> resolve: {<br /> extensions: ['.js', '.vue'],<br /> alias: {<br /> '@': path.resolve(__dirname, 'src'),<br /> 'vue$': 'vue/dist/vue.esm.js'<br /> }<br /> },<br /> module: {<br /> rules: [<br /> {<br /> test: /.js$/,<br /> exclude: /(node_modules|bower_components)/,<br /> loader: 'babel-loader'<br /> },<br /> {<br /> test: /.css$/,<br /> use: [<br /> 'style-loader',<br /> 'css-loader'<br /> ]<br /> },<br /> {<br /> test: /.(png|svg|jpg|gif)$/,<br /> use: [<br /> 'file-loader'<br /> ]<br /> },<br /> {<br /> test: /.(woff|woff2|eot|ttf|otf)$/,<br /> use: [<br /> 'file-loader'<br /> ]<br /> }<br /> ]<br /> },<br /> plugins: [].concat(<br /> [<br /> new HtmlWebpackPlugin({<br /> inlineSource: '.(js|css)$',<br /> template: paths[key].html<br /> })<br /> ],<br /> process.env.NODE_ENV === 'production' ? [<br /> new webpack.DefinePlugin({<br /> 'process.env': {<br /> NODE_ENV: '&quot;production&quot;'<br /> }<br /> }),<br /> new webpack.optimize.UglifyJsPlugin({<br /> sourceMap: true,<br /> compress: {<br /> warnings: false<br /> }<br /> }),<br /> new webpack.LoaderOptionsPlugin({<br /> minimize: true<br /> }),<br /> new HtmlWebpackInlineSourcePlugin(),<br /> ] : []<br /> )<br /> })<br /> })</p> <p>module.exports = configs" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="JavaScript"><span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a></span> path = <span class="hljs-built_in">require</span>(<span class="hljs-string">'path'</span>) <span class="hljs-keyword">const</span> webpack = <span class="hljs-built_in">require</span>(<span class="hljs-string">'webpack'</span>) <span class="hljs-keyword">const</span> HtmlWebpackPlugin = <span class="hljs-built_in">require</span>(<span class="hljs-string">'html-webpack-<a href="http://www.js-code.com/tag/plugin" title="浏览关于“plugin”的文章" target="_blank" class="tag_link">plugin</a>'</span>) <span class="hljs-keyword">const</span> HtmlWebpackInlineSourcePlugin = <span class="hljs-built_in">require</span>(<span class="hljs-string">'html-webpack-inline-source-plugin'</span>) <span class="hljs-keyword">const</span> glob = <span class="hljs-built_in">require</span>(<span class="hljs-string">'glob'</span>) <span class="hljs-keyword">const</span> paths = {} <span class="hljs-keyword">const</span> configs = [] <span class="hljs-keyword">const</span> setPath = <span class="hljs-function">(<span class="hljs-params">item, type</span>) =&gt;</span> { <span class="hljs-keyword">const</span> dir<a href="http://www.js-code.com/tag/name" title="浏览关于“name”的文章" target="_blank" class="tag_link">name</a> = path.dirname(item) <span class="hljs-keyword"><a href="http://www.js-code.com/tag/if" title="浏览关于“if”的文章" target="_blank" class="tag_link">if</a></span> (paths[dirname]) { paths[dirname][type] = item } <span class="hljs-keyword"><a href="http://www.js-code.com/tag/else" title="浏览关于“else”的文章" target="_blank" class="tag_link">else</a></span> { paths[dirname] = { [type]: item } } } glob.sync(<span class="hljs-string">'./src/**/*.js'</span>, { <span class="hljs-attr">ignore</span>: <span class="hljs-string">'./src/script/*.js'</span> }).<a href="http://www.js-code.com/tag/for" title="浏览关于“for”的文章" target="_blank" class="tag_link">for</a>Each(<span class="hljs-function"><span class="hljs-params">item</span> =&gt;</span> setPath(item, <span class="hljs-string">'script'</span>)) glob.sync(<span class="hljs-string">'./src/**/*.html'</span>).forEach(<span class="hljs-function"><span class="hljs-params">item</span> =&gt;</span> setPath(item, <span class="hljs-string">'html'</span>)) <span class="hljs-built_in"><a href="http://www.js-code.com/tag/Object" title="浏览关于“Object”的文章" target="_blank" class="tag_link">Object</a></span>.keys(paths).forEach(<span class="hljs-function"><span class="hljs-params">key</span> =&gt;</span> { <span class="hljs-keyword">const</span> distName = key.replace(<span class="hljs-string">'src'</span>, <span class="hljs-string">'dist'</span>) configs.push({ <span class="hljs-attr">en<a href="http://www.js-code.com/tag/try" title="浏览关于“try”的文章" target="_blank" class="tag_link">try</a></span>: paths[key].script, <span class="hljs-attr">output</span>: { <span class="hljs-attr">filename</span>: <span class="hljs-string">'[name].bundle.js'</span>, <span class="hljs-attr">path</span>: path.resolve(__dirname, distName) }, <span class="hljs-attr">devtool</span>: process.env.NODE_ENV === <span class="hljs-string">'production'</span> ? <span class="hljs-string">'inline-source-map'</span> : <span class="hljs-string">'#source-map'</span>, <span class="hljs-attr">devServer</span>: { <span class="hljs-attr">host</span>: <span class="hljs-string">'0.0.0.0'</span>, <span class="hljs-attr">port</span>: <span class="hljs-number">8080</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"><a href="http://www.js-code.com/tag/false" title="浏览关于“false”的文章" target="_blank" class="tag_link">false</a></span>, <span class="hljs-attr">noInfo</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">resolve</span>: { <span class="hljs-attr">extensions</span>: [<span class="hljs-string">'.js'</span>, <span class="hljs-string">'.vue'</span>], <span class="hljs-attr">alias</span>: { <span class="hljs-string">'@'</span>: path.resolve(__dirname, <span class="hljs-string">'src'</span>), <span class="hljs-string">'vue$'</span>: <span class="hljs-string">'vue/dist/vue.esm.js'</span> } }, <span class="hljs-attr">module</span>: { <span class="hljs-attr">rules</span>: [ { <span class="hljs-attr">test</span>: <span class="hljs-regexp">/.js$/</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|bower_components)/</span>, <span class="hljs-attr">loader</span>: <span class="hljs-string">'babel-loader'</span> }, { <span class="hljs-attr">test</span>: <span class="hljs-regexp">/.css$/</span>, <span class="hljs-attr">use</span>: [ <span class="hljs-string">'style-loader'</span>, <span class="hljs-string">'css-loader'</span> ] }, { <span class="hljs-attr">test</span>: <span class="hljs-regexp">/.(png|svg|jpg|gif)$/</span>, <span class="hljs-attr">use</span>: [ <span class="hljs-string">'file-loader'</span> ] }, { <span class="hljs-attr">test</span>: <span class="hljs-regexp">/.(woff|woff2|eot|ttf|otf)$/</span>, <span class="hljs-attr">use</span>: [ <span class="hljs-string">'file-loader'</span> ] } ] }, <span class="hljs-attr">plugins</span>: [].concat( [ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/new" title="浏览关于“new”的文章" target="_blank" class="tag_link">new</a></span> HtmlWebpackPlugin({ <span class="hljs-attr">inlineSource</span>: <span class="hljs-string">'.(js|css)$'</span>, <span class="hljs-attr">template</span>: paths[key].html }) ], process.env.NODE_ENV === <span class="hljs-string">'production'</span> ? [ <span class="hljs-keyword">new</span> webpack.DefinePlugin({ <span class="hljs-string">'process.env'</span>: { <span class="hljs-attr">NODE_ENV</span>: <span class="hljs-string">'"production"'</span> } }), <span class="hljs-keyword">new</span> webpack.optimize.UglifyJsPlugin({ <span class="hljs-attr">source<a href="http://www.js-code.com/tag/map" title="浏览关于“Map”的文章" target="_blank" class="tag_link">Map</a></span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">compress</span>: { <span class="hljs-attr">warnings</span>: <span class="hljs-literal">false</span> } }), <span class="hljs-keyword">new</span> webpack.LoaderOptionsPlugin({ <span class="hljs-attr">minimize</span>: <span class="hljs-literal">true</span> }), <span class="hljs-keyword">new</span> HtmlWebpackInlineSourcePlugin(), ] : [] ) }) }) <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 = configs</code></pre> <p><strong><a href="http://www.js-code.com/tag/package" title="package" target="_blank">package</a>.json</strong></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;name&quot;: &quot;webpack-demo&quot;, &quot;version&quot;: &quot;1.0.0&quot;, &quot;description&quot;: &quot;&quot;, &quot;main&quot;: &quot;index.js&quot;, &quot;scripts&quot;: { &quot;build&quot;: &quot;cross-env NODE_ENV=production webpack --progress &quot;, &quot;dev&quot;: &quot;cross-env NODE_ENV=development webpack-dev-server --open&quot; }, &quot;author&quot;: &quot;&quot;, &quot;license&quot;: &quot;ISC&quot;, &quot;devDependencies&quot;: { &quot;babel-core&quot;: &quot;^6.25.0&quot;, &quot;babel-loader&quot;: &quot;^7.1.1&quot;, &quot;babel-preset-env&quot;: &quot;^1.6.0&quot;, &quot;cross-env&quot;: &quot;^5.0.5&quot;, &quot;css-loader&quot;: &quot;^0.28.4&quot;, &quot;file-loader&quot;: &quot;^0.11.2&quot;, &quot;glob&quot;: &quot;^7.1.2&quot;, &quot;html-webpack-inline-source-plugin&quot;: &quot;0.0.9&quot;, &quot;html-webpack-plugin&quot;: &quot;^2.30.1&quot;, &quot;style-loader&quot;: &quot;^0.18.2&quot;, &quot;webpack&quot;: &quot;^3.5.4&quot;, &quot;webpack-dev-server&quot;: &quot;^2.7.1&quot; }, &quot;dependencies&quot;: { &quot;vue&quot;: &quot;^2.4.2&quot; } }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="json hljs"><code class="JSON">{ <span class="hljs-attr">"name"</span>: <span class="hljs-string">"webpack-demo"</span>, <span class="hljs-attr">"version"</span>: <span class="hljs-string">"1.0.0"</span>, <span class="hljs-attr">"description"</span>: <span class="hljs-string">""</span>, <span class="hljs-attr">"main"</span>: <span class="hljs-string">"index.js"</span>, <span class="hljs-attr">"scripts"</span>: { <span class="hljs-attr">"build"</span>: <span class="hljs-string">"cross-env NODE_ENV=production webpack --progress "</span>, <span class="hljs-attr">"dev"</span>: <span class="hljs-string">"cross-env NODE_ENV=development webpack-dev-server --<a href="http://www.js-code.com/tag/open" title="浏览关于“open”的文章" target="_blank" class="tag_link">open</a>"</span> }, <span class="hljs-attr">"author"</span>: <span class="hljs-string">""</span>, <span class="hljs-attr">"license"</span>: <span class="hljs-string">"ISC"</span>, <span class="hljs-attr">"devDependencies"</span>: { <span class="hljs-attr">"babel-core"</span>: <span class="hljs-string">"^6.25.0"</span>, <span class="hljs-attr">"babel-loader"</span>: <span class="hljs-string">"^7.1.1"</span>, <span class="hljs-attr">"babel-p<a href="http://www.js-code.com/tag/reset" title="浏览关于“reset”的文章" target="_blank" class="tag_link">reset</a>-env"</span>: <span class="hljs-string">"^1.6.0"</span>, <span class="hljs-attr">"cross-env"</span>: <span class="hljs-string">"^5.0.5"</span>, <span class="hljs-attr">"css-loader"</span>: <span class="hljs-string">"^0.28.4"</span>, <span class="hljs-attr">"file-loader"</span>: <span class="hljs-string">"^0.11.2"</span>, <span class="hljs-attr">"glob"</span>: <span class="hljs-string">"^7.1.2"</span>, <span class="hljs-attr">"html-webpack-inline-source-plugin"</span>: <span class="hljs-string">"0.0.9"</span>, <span class="hljs-attr">"html-webpack-plugin"</span>: <span class="hljs-string">"^2.30.1"</span>, <span class="hljs-attr">"style-loader"</span>: <span class="hljs-string">"^0.18.2"</span>, <span class="hljs-attr">"webpack"</span>: <span class="hljs-string">"^3.5.4"</span>, <span class="hljs-attr">"webpack-dev-server"</span>: <span class="hljs-string">"^2.7.1"</span> }, <span class="hljs-attr">"dependencies"</span>: { <span class="hljs-attr">"vue"</span>: <span class="hljs-string">"^2.4.2"</span> } }</code></pre> <p>在 Webpack 中我们导出的是一个 config <a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="数组" target="_blank">数组</a>,通过扫描 src 文件下的 JavaScript 和 <a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a> 文件,获取它们的 path 信息,为每一个 JavaScript 进行打包。此外我们可能还需要忽略一些 JavaScript 文件。</p> <p>在生产环境的构建下,我配置了将 css 和 JavaScript 都插入了 html 文件中,这又是官方的一种提倡做法。</p> <p>估计上面的配置好后,设置两个 npm script 命令,方便开发使用:</p> <ul> <li> <code>npm run dev</code>:启动本地开发服务器;</li> <li> <code>npm run build</code>:编译项目,输出到 dist 目录下。</li> </ul> <h1 id="articleHeader3">修改入口地址</h1> <p>在 APICloud 项目里,我们在根目录有一个 <a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>dex.html 文件,这是一个入口文件,我们可以通过修改 config.xml 来修改入口文件。一般来说都是通过 <a href="http://www.js-code.com/tag/open" title="open" target="_blank">open</a>Frame 或者 <a href="http://www.js-code.com/tag/open" title="open" target="_blank">open</a>W<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a> 来嵌入或者打开一个页面,在我们的本地开发环境下,我们通过 Webpack 启动了一个本地服务器进行调试,所以我们也需要将地址从目录的相对地址改为一段 url。例如:</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>="<script type=&quot;text/javascript&quot;> apiready = <a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a> () { api.openFrame({ <a href="http://www.js-code.com/tag/name" title="name" target="_blank">name</a>: 'main', // url: 'dist/index.html', url: 'http://<你的本机 ip>:[端口号]', rect: { x: 0, y: 45, w: 'auto', h: 'auto' } }) } </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="HTML"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"<a href="http://www.js-code.com/tag/text" title="浏览关于“text”的文章" target="_blank" class="tag_link">text</a>/<a href="http://www.js-code.com/tag/java" title="浏览关于“java”的文章" target="_blank" class="tag_link">java</a>script"</span>&gt;</span><span class="actionscript"> apiready = <span class="hljs-function"><span class="hljs-keyword"><a href="http://www.js-code.com/tag/function" title="浏览关于“function”的文章" target="_blank" class="tag_link">function</a></span> <span class="hljs-params">()</span> </span>{ api.openFrame({ name: <span class="hljs-string">'main'</span>, <span class="hljs-comment">// url: 'dist/index.html',</span> url: <span class="hljs-string">'http://&lt;你的本机 ip&gt;:[端口号]'</span>, rect: { x: <span class="hljs-number">0</span>, y: <span class="hljs-number">45</span>, w: <span class="hljs-string">'auto'</span>, h: <span class="hljs-string">'auto'</span> } }) } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>如果需要编译项目的话,入口文件也需要修改成相对路径。这是一个麻烦的点,目前还没什么好办法解决。</p> <h1 id="articleHeader4">集成 ESl<a href="http://www.js-code.com/tag/int" title="int" target="_blank">int</a></h1> <p>目标,在开发和编译过程中 Webpack 能够使用 esl<a href="http://www.js-code.com/tag/int" title="int" target="_blank">int</a> 检查代码,出现错误不通过,使用 aribnb 的 JavaScript 风格编程。</p> <p><strong>webpack.config.json</strong></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="... configs.push({ ... module: { rules: [ { enforce: &quot;pre&quot;, test: /.js$/, exclude: /(node_modules|bower_components)/, loader: &quot;eslint-loader&quot;, }, ... ] } }) ..." title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="JavaScript">... configs.push({ ... module: { <span class="hljs-attr">rules</span>: [ { <span class="hljs-attr">enforce</span>: <span class="hljs-string">"pre"</span>, <span class="hljs-attr">test</span>: <span class="hljs-regexp">/.js$/</span>, <span class="hljs-attr">exclude</span>: <span class="hljs-regexp">/(node_modules|bower_components)/</span>, <span class="hljs-attr">loader</span>: <span class="hljs-string">"esl<a href="http://www.js-code.com/tag/int" title="浏览关于“int”的文章" target="_blank" class="tag_link">int</a>-loader"</span>, }, ... ] } }) ...</code></pre> <p><strong><a href="http://www.js-code.com/tag/package" title="package" target="_blank">package</a>.json</strong></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="{ ... devDependencies: { ... &quot;eslint&quot;: &quot;^4.4.1&quot;, &quot;eslint-config-airbnb-base&quot;: &quot;^11.3.1&quot;, &quot;eslint-loader&quot;: &quot;^1.9.0&quot;, &quot;eslint-plugin-html&quot;: &quot;^3.2.0&quot;, &quot;eslint-plugin-import&quot;: &quot;^2.7.0&quot;, ... } ... }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="json hljs"><code class="JSON">{ ... devDependencies: { ... <span class="hljs-attr">"eslint"</span>: <span class="hljs-string">"^4.4.1"</span>, <span class="hljs-attr">"eslint-config-airbnb-base"</span>: <span class="hljs-string">"^11.3.1"</span>, <span class="hljs-attr">"eslint-loader"</span>: <span class="hljs-string">"^1.9.0"</span>, <span class="hljs-attr">"eslint-plugin-html"</span>: <span class="hljs-string">"^3.2.0"</span>, <span class="hljs-attr">"eslint-plugin-import"</span>: <span class="hljs-string">"^2.7.0"</span>, ... } ... }</code></pre> <p><strong>.eslintrc</strong></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;extends&quot;: &quot;airbnb-base&quot;, &quot;plugins&quot;: [ &quot;html&quot; ] }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="json hljs"><code class="JSON">{ <span class="hljs-attr">"<a href="http://www.js-code.com/tag/extends" title="浏览关于“extends”的文章" target="_blank" class="tag_link">extends</a>"</span>: <span class="hljs-string">"airbnb-base"</span>, <span class="hljs-attr">"plugins"</span>: [ <span class="hljs-string">"html"</span> ] }</code></pre> <p><strong>.eslintignore</strong></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="node_modules dist *.css" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs nginx"><code><span class="hljs-attribute">node_modules</span> dist <span class="hljs-regexp">*.css</span></code></pre> <blockquote> <p><a href="https://github.com/airbnb/javascript" rel="nofollow noreferrer" target="_blank">Airbnb JavaScript Style Guide</a></p> </blockquote> <h1 id="articleHeader5">结语</h1> <p>这次对 APICloud 集成 Webpack 尝试,结果还算可。但是个人对 APICloud 的开发还是非常的不满意的,对于 <a href="http://www.js-code.com/tag/react" title="React" target="_blank">React</a> Native 来说:没有热更新、在 APP loader 下调试不能使用 Chrome developer tool等。看网上对这个框架的评价,也是处于一个较低的水平。只能通过这次项目的开发再深入了解的它们的利弊了。</p> <p>项目地址:<a href="https://github.com/q545244819/APICloud-Webpack-Demo" rel="nofollow noreferrer" target="_blank">APICloud-Webpack-Demo</a></p> <p></code></p>

总结

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

在 APICloud 项目中使用 Webpack

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

在 APICloud 项目中使用 Webpack

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

80%的人都看过