快速入门vue-cli配置

ExtractTextPlugin.extract({
    use: ["css-loader","less-loader","sass-loader"...],
    fallback: 'vue-style-loader'
})

const utils = require('./utils')
const config = require('../config')

//不同环境为isProduction 赋值: 生产环境为true，开发环境为false
const isProduction = process.env.NODE_ENV === 'production'

//不同环境为sourceMapEnabled 赋值: 这里都为true
const sourceMapEnabled = isProduction  
? config.build.productionSourceMap  
: config.dev.cssSourceMap
//导出vue-loader的配置，这里我们用了utils文件中的cssLoaders();
module.exports = {  
    loaders: utils.cssLoaders({    
        sourceMap: sourceMapEnabled,    
        extract: isProduction  
    }),  
    cssSourceMap: sourceMapEnabled,
    cacheBusting: config.dev.cacheBusting,

    //transformToRequire的作用是在模板编译的过程中，编译器可以将某些属性，如src转换为require调用;  
    transformToRequire: {    
        video: ['src', 'poster'],    
        source: 'src',    
        img: 'src',    
        image: 'xlink:href'  
    }
}

const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')

//resolve这个函数返回的是当前目录下"../dir"这个文件夹，__dirname指的是当前文件所在路径
function resolve (dir) {  return path.join(__dirname, '..', dir)}

module.exports = {
    //返回项目的根路径  
    context: path.resolve(__dirname, '../'),
    //入口文件  
    entry: {    
      app: './src/main.js'  
    },
    //出口文件  
    output: {   
        path: config.build.assetsRoot,    
        filename: '[name].js',    
        publicPath: process.env.NODE_ENV === 'production'      
        ? config.build.assetsPublicPath      
        : config.dev.assetsPublicPath  
    },  
    resolve: {
        //自动解析扩展，比如引入对应的文件，js,vue,json的后缀名就可以省略了    
        extensions: ['.js', '.vue', '.json'],    
        alias: {
            //精准匹配，使用vue来替代vue/dist/vue.esm.js      
            'vue$': 'vue/dist/vue.esm.js',
            //使用@替代src路径，当你引入src下的文件是可以使用import XXfrom "@/xx"
            '@': resolve('src'),    
        }  
    },

    //一些loader配置，避免篇幅过长我省略一部分，大家可以看自己的文件 
    module: {    
        rules: [     
            {        
                test: /\.vue$/,        
                loader: 'vue-loader',        
                options: vueLoaderConfig      
            },      
            {        
                test: /\.js$/,        
                loader: 'babel-loader',        
                include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]      
            },      
            ......    
        ]  
    },

    //node里的这些选项是都是Node.js全局变量和模块，这里主要是防止webpack注入一些Node.js的东西到vue中  
    node: {    
        setImmediate: false,    
        dgram: 'empty',    
        fs: 'empty',    
        net: 'empty',    
        tls: 'empty',    
        child_process: 'empty'  
    }
}

const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const path = require('path')
const baseWebpackConfig = require('./webpack.base.conf')

//一个负责拷贝资源的插件
const CopyWebpackPlugin = require('copy-webpack-plugin')

const HtmlWebpackPlugin = require('html-webpack-plugin')

//一个更友好的展示webpack错误提示的插件
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')

//一个自动检索端口的包
const portfinder = require('portfinder')

const HOST = process.env.HOSTconst PORT = process.env.PORT && Number(process.env.PORT)

const devWebpackConfig = merge(baseWebpackConfig, {  
    module: {    
        rules: utils.styleLoaders({ 
            sourceMap: config.dev.cssSourceMap,
            usePostCSS: true 
        })  
    },  
    
    devtool: config.dev.devtool,
    // devServer的配置大家看文档就好了 
    devServer: {    
        clientLogLevel: 'warning',    
        historyApiFallback: {      
            rewrites: [        
                { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },      
            ],    
        },    
        hot: true,    
        contentBase: false,   
        compress: true,    
        host: HOST || config.dev.host,    
        port: PORT || config.dev.port,    
        open: config.dev.autoOpenBrowser,   
        overlay: config.dev.errorOverlay      
        ? { warnings: false, errors: true }      
        : false,    
        publicPath: config.dev.assetsPublicPath,    
        proxy: config.dev.proxyTable,    
        quiet: true,    
        watchOptions: {      
            poll: config.dev.poll,    
        }  
    },  
    plugins: [
    
        //还记得之前说的生产环境和开发环境的变量在哪儿定义的吗？对，就是这里    
        new webpack.DefinePlugin({      
            process.env: require('../config/dev.env')    
        }),

        //模块热替换的插件，修改模块不需要刷新页面    
        new webpack.HotModuleReplacementPlugin(),

        //当使用HotModuleReplacementPlugin时，这个插件会显示模块正确的相对路径    
        new webpack.NamedModulesPlugin(),

        //在编译出错时，使用NoEmitOnErrorsPlugin来跳过输出阶段，这样可以确保输出资源不会包含错误
        new webpack.NoEmitOnErrorsPlugin(),   
        new HtmlWebpackPlugin({      
            filename: 'index.html',      
            template: 'index.html',      
            inject: true    
        }),    

        // 将static文件夹和里面的内容拷贝到开发模式下的路径,比如static下有个img文件夹，里面有张图片
        // 我们可以这样访问：localhost:8080/static/img/logo.png    
        new CopyWebpackPlugin([     
            {        
                from: path.resolve(__dirname, '../static'),        
                to: config.dev.assetsSubDirectory,        
                ignore: ['.*']      
            }    
        ])  
    ]
})

//这里主要是做端口的检索以及npm run dev后对错误的处理，我们可以看这里使用了前面引入的
//'friendly-errors-webpack-plugin'插件
module.exports = new Promise((resolve, reject) => {
  portfinder.basePort = process.env.PORT || config.dev.port
  portfinder.getPort((err, port) => {
    if (err) {
      reject(err)
    } else {
      // publish the new Port, necessary for e2e tests
      process.env.PORT = port
      // add port to devServer config
      devWebpackConfig.devServer.port = port

      // Add FriendlyErrorsPlugin
      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
        compilationSuccessInfo: {
          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
        },
        onErrors: config.dev.notifyOnErrors
        ? utils.createNotifierCallback()
        : undefined
      }))

      resolve(devWebpackConfig)
    }
  })
})