快速入门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)
    
  )
)