vuePro/webpack.base.js at master · githubtuxedo/vuePro · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
const path = require('path')
const config = require('./config')
const vueLoaderConfig = require('./tool/vue-loader.conf')

// 给出正确的绝对路径
function resolve (dir) {
    return path.join(__dirname, dir)
}

// const createLintingRule = () => ({
//   test: /\.(js|vue)$/,
//   loader: 'eslint-loader',
//   enforce: 'pre',
//   include: [resolve('src'), resolve('test')],
//   options: {
//     formatter: require('eslint-friendly-formatter'),
//     emitWarning: !config.dev.showEslintErrorsInOverlay
//   }
// })


module.exports = {
    // 配置webpack编译入口
    entry: {
        app: './src/main.js'
    },

    target: "web", // 默认构建浏览器端

    // 配置webpack输出路径和命名规则
    output: {
        // webpack输出的目标文件夹路径（例如：/dist）
        path: resolve(__dirname, 'dist'),
        // webpack输出bundle文件命名格式
        filename: '[name].bundle.js',
        chunkFilename: "[chunkhash].js",
        // webpack编译输出的发布路径
        publicPath: process.env.NODE_ENV === 'production'
            ? config.build.assetsPublicPath
            : config.dev.assetsPublicPath,
        /** 使用CDN和资源hash的复杂示例 **/
        // path: "/home/proj/cdn/assets/[hash]",
        // publicPath: "http://cdn.example.com/assets/[hash]/"
        /** ============================= **/
    },

        // 配置模块resolve的规则
    resolve: {
        // 解析模块请求的选项
        // （不适用于对 loader 解析）

        // 自动resolve的扩展名
        extensions: ['.js', 'ts','.vue', '.json','tsx'],
        // resolve模块的时候要搜索的文件夹

        modules: [ resolve('src'), resolve('node_modules') ],

        // 创建路径别名，有了别名之后引用模块更方便，

        // import Vue from 'vue/dist/vue.common.js'可以写成 import Vue from 'vue'
        alias: {
            // 'vue$': 'vue/dist/vue.common.js',
            // 'src': resolve('src'),
            // 'assets': resolve('src/assets'),
            // 'components': resolve('src/components')
            'vue$': 'vue/dist/vue.esm.js',
            '@': resolve('src')
        },

        enforceExtension: false,
        // 如果为 true，请求必不包括扩展名
        // 如果为 false，请求可以包括扩展名

        unsafeCache: true,
        unsafeCache: {},
        // 为解析的请求启用缓存
        // 这是不安全，因为文件夹结构可能会改动
        // 但是性能改善是很大的
    },

    // 配置不同类型模块的处理规则
    module: {
        rules: [
            // ...(config.dev.useEslint?[createLintingRule()] : []),
            {
                test: /\.tsx?$/,
                exclude: /node_modules/,
                enforce: 'pre',
                // pre post值 标识应用这些规则，即使规则覆盖（高级选项）
                loader: 'tslint-loader'
            },
            {
                test: /\.vue$/,
                exclude: /node_modules/,
                loader: 'vue-loader',
                options: Object.assign(vueLoaderConfig, {
                loaders: {
                    ts: "ts-loader",
                    tsx: "babel-loader!ts-loader"
                }
                })
            },
            {
                test: /\.tsx?$/,
                exclude: /node_modules/,
                // exclude 是必不匹配选项（优先于 test 和 include）
                use: [
                    "babel-loader",
                    {
                        loader: "ts-loader",
                        options: { appendTsxSuffixTo: [/\.vue$/] }
                    }
                ]
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: [resolve('src'), resolve('test')]
                // test 和 include 具有相同的作用，都是必须匹配选项
            },
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: [
                    {
                        loader: "url-loader",
                        options: {
                            name: "[name]-[hash:5].min.[ext]",
                            limit: 20000, // size <= 20KB
                            publicPath: "static/",
                            outputPath: "static/"
                        }
                    }
                ]
            },
        ],
        noParse: [
            /special-library\.js$/
        ],
        // 不解析这里的模块
    },

    externals: ["react", /^@angular\//],
    // 不要遵循/打包这些模块，而是在运行时从环境中请求他们

    cache: true,    //启用缓存
}