vue-cli 3とwebpack構成の詳細(vue.config.js)


概要:vue-cli 3.0構成まとめ、webpackと組み合わせて使用
参考記事:https://blog.csdn.net/Hampton_Chen/article/details/88931567
                  https://recomm.cnblogs.com/blogpost/10334865
                  https://www.cnblogs.com/jiekzou/p/12923393.html
1.コンポーネントのセット構成と説明
module.exports = {
    //          URL
    baseUrl: process.env.NODE_ENV === 'production' ? '192.168.60.110:8080' :             '192.168.60.110:8080',
    // build               --no-clean       
    outputDir: 'dist',
    // build           (js、css、img、fonts)   (    outputDir  )   
    assetsDir: '',
    //       index.html       (    outputDir)。          。
    indexPath: 'index.html',
    //                 hash     
    filenameHashing: true,
    //        ,     
    pages: {
        index: {
        entry: 'src/index/main.js',  // page    
        //     
        template: 'public/index.html',
        //   dist/index.html    
        filename: 'index.html',
        //     title    ,template    title       
        title: 'Index Page',
        //           ,        
        //commons               ,vendor   npm          
        // indexjs                
        chunks: ['chunk-vendors', 'chunk-common', 'index']
        },
        //               ,        `public/subpage.html`,         ,     `public/index.html`。
        //            `subpage.html`。
    subpage: 'src/subpage/main.js'
},
    //            eslint-loader        lint    (         eslint-loader)
    lintOnSave: process.env.NODE_ENV !== 'production',
    //               Vue     
    runtimeCompiler: false,
    // Babel       
    transpileDependencies: [],
    //             source map,        false          
    productionSourceMap: true,
    //       HTML   <link rel="stylesheet"/>   <script>     crossorigin   ( :           )
    crossorigin: '',
    //      HTML    <link rel="stylesheet">   <script>       Subresource Integrity (SRI)
    integrity: false,
    //           ,     webpack-merge          
    //                  ,          ,         (                 )。                    。    ,         ,              
    configureWebpack: {},
    //      webpack   (    、  Loader  )(    )
    chainWebpack: () => { },
    // css   
    css: {
    //   true ,css       module     false
        modules: true,
    //         CSS          CSS    ,         ,          false          CSS
    //          true,       false
        extract: false,
    //     CSS    source map。    true             
        sourceMap: false,
    //  CSS     loader     (   css-loader postcss-loader sass-loader less-loader stylus-loader)
    loaderOptions: { css: {}, less: {} }
    },
    //    webpack-dev-server       
    devServer: {},
    //     Babel   TypeScript    thread-loader
    parallel: require('os').cpus().length > 1,
    //   PWA       
    pwa: {},
    //                
    pluginOptions: {}
}</code></pre> 
  <p> </p> 
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC WAP    -->
                    <div id="SOHUCS" sid="1275640147542556672"></div>
                    <script type="text/javascript" src="/views/front/js/chanyan.js"></script>
                    <!--    -         -->
                     
                </code></pre></div>
                <div class="col-md-3">
                    <div class="row" id="ad">
                        <!--    -  1       -->
                        <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                             
                        </div>
                        <!--    -  2       -->
                        <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                             
                        </div>
                        <!--    -  3       -->
                        <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                             
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <h4 class="pt20 mb15 mt0 border-top">       </h4>
        <div id="paradigm-article-related">
            <div class="recommend-post mb30">
                <ul class="widget-links">
                                <li><a href="#!/article/48.htm" title="         " rel="nofollow">         </a>
                                    <span class="text-muted">    </span>
<a class="tag" taget="_blank" href="#!/search/ios/1.htm" rel="nofollow">ios</a><a class="tag" taget="_blank" href="#!/search/%E6%B8%B8%E6%88%8F/1.htm" rel="nofollow">  </a><a class="tag" taget="_blank" href="#!/search/%E7%BC%96%E7%A8%8B/1.htm" rel="nofollow">  </a><a class="tag" taget="_blank" href="#!/search/apple/1.htm" rel="nofollow">apple</a><a class="tag" taget="_blank" href="#!/search/%E6%94%AF%E4%BB%98/1.htm" rel="nofollow">  </a>
                                </li>
                                <li><a href="#!/article/175.htm" title="       Nginx F5      " rel="nofollow">       Nginx F5      </a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="#!/search/nginx/1.htm" rel="nofollow">nginx</a><a class="tag" taget="_blank" href="#!/search/F5/1.htm" rel="nofollow">F5</a>
                                </li>
                                <li><a href="#!/article/302.htm" title="LeetCode[Math] - #9 Palindrome Number" rel="nofollow">LeetCode[Math] - #9 Palindrome Number</a>
                                    <span class="text-muted">Cwind</span>
<a class="tag" taget="_blank" href="#!/search/java/1.htm" rel="nofollow">java</a><a class="tag" taget="_blank" href="#!/search/Algorithm/1.htm" rel="nofollow">Algorithm</a><a class="tag" taget="_blank" href="#!/search/%E9%A2%98%E8%A7%A3/1.htm" rel="nofollow">  </a><a class="tag" taget="_blank" href="#!/search/LeetCode/1.htm" rel="nofollow">LeetCode</a><a class="tag" taget="_blank" href="#!/search/Math/1.htm" rel="nofollow">Math</a>
                                </li>
                                <li><a href="#!/article/429.htm" title="        " rel="nofollow">        </a>
                                    <span class="text-muted">15700786134</span>
<a class="tag" taget="_blank" href="#!/search/%E7%94%BB%E5%9B%BE%E6%9D%BF/1.htm" rel="nofollow">   </a>
                                </li>
                                <li><a href="#!/article/556.htm" title="linux ps  " rel="nofollow">linux ps  </a>
                                    <span class="text-muted">   </span>
<a class="tag" taget="_blank" href="#!/search/linux/1.htm" rel="nofollow">linux</a>
                                </li>
                                <li><a href="#!/article/683.htm" title="Android                 " rel="nofollow">Android                 </a>
                                    <span class="text-muted">    _</span>
<a class="tag" taget="_blank" href="#!/search/android/1.htm" rel="nofollow">android</a>
                                </li>
                                <li><a href="#!/article/810.htm" title="java  txt     " rel="nofollow">java  txt     </a>
                                    <span class="text-muted">  ing</span>
<a class="tag" taget="_blank" href="#!/search/java/1.htm" rel="nofollow">java</a><a class="tag" taget="_blank" href="#!/search/servlet/1.htm" rel="nofollow">servlet</a>
                                </li>
                                <li><a href="#!/article/937.htm" title="Scala stack  ,            " rel="nofollow">Scala stack  ,            </a>
                                    <span class="text-muted">   </span>
<a class="tag" taget="_blank" href="#!/search/scala/1.htm" rel="nofollow">scala</a><a class="tag" taget="_blank" href="#!/search/sbt/1.htm" rel="nofollow">sbt</a>
                                </li>
                </ul>
            </div>
        </div>
    </div>

<div>
    <div class="container">
        <div class="indexes">
            <strong>     :</strong>
            <a href="#!/tags/A/1.htm" rel="nofollow">A</a><a href="#!/tags/B/1.htm" rel="nofollow">B</a><a href="#!/tags/C/1.htm" rel="nofollow">C</a><a href="#!/tags/D/1.htm" rel="nofollow">D</a><a href="#!/tags/E/1.htm" rel="nofollow">E</a><a href="#!/tags/F/1.htm" rel="nofollow">F</a><a href="#!/tags/G/1.htm" rel="nofollow">G</a><a href="#!/tags/H/1.htm" rel="nofollow">H</a><a href="#!/tags/I/1.htm" rel="nofollow">I</a><a href="#!/tags/J/1.htm" rel="nofollow">J</a><a href="#!/tags/K/1.htm" rel="nofollow">K</a><a href="#!/tags/L/1.htm" rel="nofollow">L</a><a href="#!/tags/M/1.htm" rel="nofollow">M</a><a href="#!/tags/N/1.htm" rel="nofollow">N</a><a href="#!/tags/O/1.htm" rel="nofollow">O</a><a href="#!/tags/P/1.htm" rel="nofollow">P</a><a href="#!/tags/Q/1.htm" rel="nofollow">Q</a><a href="#!/tags/R/1.htm" rel="nofollow">R</a><a href="#!/tags/S/1.htm" rel="nofollow">S</a><a href="#!/tags/T/1.htm" rel="nofollow">T</a><a href="#!/tags/U/1.htm" rel="nofollow">U</a><a href="#!/tags/V/1.htm" rel="nofollow">V</a><a href="#!/tags/W/1.htm" rel="nofollow">W</a><a href="#!/tags/X/1.htm" rel="nofollow">X</a><a href="#!/tags/Y/1.htm" rel="nofollow">Y</a><a href="#!/tags/Z/1.htm" rel="nofollow">Z</a><a href="#!/tags/0/1.htm" rel="nofollow">  </a>
        </div>
    </div>
</div>
<footer id="footer" class="mb30 mt30">
    <div class="container">
        <div class="footBglm">
            <a href="#!/" rel="nofollow">  </a> -
            <a href="#!/custom/about.htm" rel="nofollow">    </a> -
            <a href="#!/search/Java/1.htm" rel="nofollow">    </a> -
            <a href="#!/sitemap.xml" rel="nofollow">Sitemap</a> -
            <a href="#!/custom/delete.htm" rel="nofollow">    </a>
        </div>
        <div class="copyright">     IT    CopyRight © 2000-2050 IT    IT610.com , All Rights Reserved.
            <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank"> ICP 09083238 </a><br/>
        </div>
    </div>
</footer>
<!--      -->
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"/>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"/>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"/>
<link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/>
<script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"/>