webpack配置

webpack.config.js

// webpack loader列表
// https://doc.webpack-china.org/loaders/less-loader
// webpack plugin列表
// https://github.com/webpack-contrib/awesome-webpack#webpack-plugins
const path = require('path')
const webpack = require('webpack')
const UglifyPlugin = require('uglifyjs-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')


// webpack 3.0 在script中配置
console.log('ENV =====>', process.env.NODE_ENV) 

/* 
webpack 4.0 暴露一个函数，可以获取到mode的环境变量
module.exports = (env, argv) => {
    console.log(env, argv.mode)
    return { ... }
} */

module.exports = {
    entry: {
        // 入口
        vendor: ["vue"],
        index: './src/index.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        // filename: 'bundle.js'
        // name 是根据entry中的[index]名字
        // filename: '[name]_[hash].js' 
        // ?rd=[hash] 配合HtmlWebpackPlugin，可以将js插入html中加上随机数
        // 使用chunkhash，最大程度实现缓存
        // 热更新(HMR)不能和[chunkhash]同时使用。 解决：如果是开发环境，将配置文件中的chunkhash 替换为hash
        filename: '[name].js?rd=[hash:8]',
        // chunk的文件名可以单独指定，懒加载可看index.js中
        chunkFilename: '[name].js?rd=[hash:5]',
    },
    // webpack 中有一个很关键的模块 enhanced-resolve 就是处理依赖模块路径的解析的
    resolve: {
        modules: [
            // 使用绝对路径指定项目 node_modules，不做过多(一层层)查询
            path.resolve(__dirname, 'node_modules'), 
        ],
        extensions: ['.vue', '.js', '.json', '.jsx', '.css'],
        alias: {
            'css': path.resolve(__dirname, 'src/assets/css')
        }
    },
    // webpack 中提供一种处理多种文件格式的机制，便是使用 loader。我们可以把 loader 理解为是一个转换器，负责把某种文件格式的内容转换成 webpack 可以支持打包的模块。
    module: {
        rules: [{
                // 匹配文件路径的正则表达式，通常我们都是匹配文件类型后缀
                test: /\.(less|css)$/,
                include: [
                    // 指定哪些路径下的文件需要经过 loader 处理，node_module不需要处理，性能问题
                    // 方法会把一个路径或路径片段的序列解析为一个绝对路径。
                    // http://nodejs.cn/api/path.html#path_path_resolve_paths
                    path.resolve(__dirname, 'src')
                ],
                // 指定使用的loader
                // 如果需要单独把 CSS 文件分离出来，我们需要使用 extract-text-webpack-plugin 插件。 并且在plugin中new一个配置实例
                use: ExtractTextPlugin.extract({
                    use: [{
                            // 必须排在less-loader前面 ！！
                            loader: 'css-loader',
                            options: {
                                minimize: true, //