import Vue from 'vue'
// ... 省略
// 引用指定的样式源文件
import './app/assets/less/dark.less'
export default {
 // ... 省略
}

import 'uikit/dist/css/components/tabs.css'

@font-face {
  font-family: 'Darkenstone';
  src: url('./Darkenstone.eot');
  src: url('./Darkenstone.eot"htmlcode">

{
  test: /\.(woff2"htmlcode">

{
  test: /\.(woff2"htmlcode">

module.exports = {
 entry:{ ... },
 output: { ... },
 module:{ ... },
 resolve: {
  extensions:['','.js'],
  alias:{ // 别名
   'bs-select':'bower_components/bootstrap-select/dist/js/select.js'
  }
 }
}


有了这个定义以后，我们就可以将上面那个长引用改为下面的写法：


import Selector from 'bs-select';


绝对不要让路径引用进入到我们的代码，因为这是代码的“癌症”，一旦开始植入并生长起来，以前的代码将难以维护！
●  配置多入口程序
多数情况下我们的程序入口不单单只有一个，举一个最简单的例子，前台提供给最终用户使用（http://www.domain.com/index），后台提供给登录用户使用（http://www.domain.com/admin/），那么自然需要多个与main.js类似的程序入口了。
首先在build/webpack.base.conf.js配置文件中的entry配置属性上加上新的入口文件：


module.exports = {
 entry: {
 app: './src/main.js',
 admin : './src/admin-main.js'
 },
 // ... 省略
}


这是用于告诉webpack哪几个是入口文件，这些文件需要被生成到启动页的<script>内。
vue-cli的webpack模板使用HtmlWebpackPlugin插件，生成HTML入口页面并自动将生成后的JS文件和CSS文件的引用地址写入到页内的<script>中。
这里就需要在build/webpack.dev.config.js文件内的plugins配置项内多配置一个HtmlWebpackPlugin插件，用于生成admin.html入口页。


plugins:[
 // ... 省略
 // 这是原有的配置项，用于匹配注入app.js的输出脚本
 new HtmlWebpackPlugin({
 filename: process.env.NODE_ENV === 'testing'
  "external nofollow" href="https://github.com/kangax/html-minifier#options-quick-reference">https://github.com/kangax/html-minifier#options-quick-reference。

还有就是得将同样的配置加入到生产环境专用的webpack配置文件webpack.prod.conf.js中，否则当我们运行npm run build时是不会输出admin.js和admin.html这两个入口文件的（由于配置内容相同这里就不再重复了）。
最后，如果使用了vue-router就得对connect-history-api-fallback插件的配置进行修改，否则原有的默认配置只会将所有的请求转发给index.html，这样就会导致History API没有办法正确地将请求指向admin.html，导致热加载失败，具体做法如下所述。
打开dev-server.js文件，将app.use(require('connect-history-api-fallback')())配置改为以下的方式：


// handle fallback for HTML5 history API
var history = require('connect-history-api-fallback')
// app.use(require('connect-history-api-fallback')())
app.use(history({
 rewrites: [
 { from: /^\/admin\/.*$/, to: '/admin.html' }
 ]
}));


新入口需要有明确区分的路由规则，否则还是会产生热加载失败的情况，这样就非常不便于开发了。


总结
以上所述是小编给大家介绍的脚手架vue-cli工程webpack的基本用法详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

                                
                                

                                    vue-cli,webpack 
                                

                                    标签：
                                        
vue-cli,webpack