快速入门vue-cli配置

这里可能有的朋友不了解cssLoaders()和styleLoaders()这两个方法返回的是个什么东西，我在这里简单的写一下：

• cssLoaders方法根据传进来的参数(options)是否有extract属性来返回不同的值，如果你看了后面的代码你就会知道在生产模式下extract属性为true，开发模式下为false。也就是说，在生产模式下返回的是一个类似于这样的数组：

ExtractTextPlugin.extract({

    use: ["css-loader","less-loader","sass-loader"...],

    fallback: 'vue-style-loader'

})

[ { loader: 'css-loader', options: { sourceMap: true } }, { loader: 'less-loader', options: { sourceMap: true } } ]

["vue-style-loader","css-loader","less-loader","sass-loader"...] //我还是简写了

[

    {

        test: /\.css$/,

        use: [ 'style-loader', 'css-loader' ]

    }，

    ...

]

3.vue-loader.conf.js:

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)

    }

  })

})