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
| /*
| * @Author: 小明丶
| * @Date: 2019-08-19 15:23:18
| * @LastEditors: 小明丶
| * @LastEditTime: 2021-01-07 10:34:13
| * @Description:
| */
| // webpack通用配置
| const path = require('path');
| const HtmlWebpackPlugin = require('html-webpack-plugin');
| const VueLoaderPlugin = require('vue-loader/lib/plugin');
| const MiniCssExtractPlugin = require('mini-css-extract-plugin');
| const CopyPlugin = require('copy-webpack-plugin');
| const vuxLoader = require('vux-loader');
| let env = process.env.NODE_ENV;
|
| //打包地址
| let srcUrl = '/sib_wx_scorec/'
| module.exports = {
| entry: {
| index: "./src/index.js",
| },
| output: {
| filename: 'js/[name].js',
| path: path.resolve(__dirname, 'dist'),
| publicPath: env ? '/sib_wx_scorec/' : '/' //根据线上项目路径更改 /projectpath
| },
| /**防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖，
| * 简而言之：就是使用cdn~不打包这些变量引用的文件，生成环境时需要在index.html中手动引入cdn
| */
| externals: {
| vue: "Vue",
| axios: "axios",
| vuex: "Vuex",
| router: "VueRouter",
| },
| resolve: {
| extensions: ['.vue', '.js', '.less'],
| alias: { //别名配置
| "@": path.resolve(__dirname, 'src')
| }
| },
| module: {
| rules: [{
| test: /\.(svg|ttf|eot|woff)\??.*$/,
| loader: "url-loader?limit=10000"
| },
| {
| test: /\.css$/,
| use: [
| env ? MiniCssExtractPlugin.loader : "vue-style-loader",
| 'css-loader',
| "postcss-loader",
| ],
| },
| {
| test: /\.less$/,
| use: [
| env ? MiniCssExtractPlugin.loader : "vue-style-loader",
| 'css-loader',
| "postcss-loader", //posscss-loader顺序一定要在less-loader前面~不然无法解析
| 'less-loader',
| // 全局注入less变量，在所有vue组件中可使用
| // 不能写不接受变量的死类名在这些文件里，不然每个vue文件都会注入这些css类，打包后增加css体积！
| {
| loader: 'style-resources-loader',
| options: {
| patterns: [
| path.resolve(__dirname, 'src/style/mixins.less'),
| ]
| }
| }
| ]
| },
| {
| test: /\.(png|svg|jpg|gif)/, //处理图片
| use: [{
| loader: 'url-loader',
| options: {
| limit: 100000,
| outputPath: 'img/',
| publicPath: `${srcUrl}img`
| //publicPath: `/img`
| }
| }]
| },
| {
| test: /\.vue$/,
| loader: 'vue-loader'
| },
| {
| test: /\.js$/,
| exclude: /node_modules/,
| use: {
| loader: 'babel-loader',
| options: {
| // @vue/babel-preset-jsx vue jsx语法支持
| presets: ['@babel/preset-env', '@vue/babel-preset-jsx'],
| plugins: ["dynamic-import-webpack"] //import 函数支持，需要安装
| }
| }
| },
| ]
| },
| plugins: [
| // 静态目录
| new CopyPlugin([{
| from: path.resolve(__dirname, 'static'),
| to: 'static',
| }, ]),
| new VueLoaderPlugin(),
| new HtmlWebpackPlugin({
| template: './public/index.html', //以这个文件作为模板
| filename: 'index.html', //打包后的文件名
| title: 'Vue_webpack',
| hash: true,
| minify: {
| removeComments: true, //移除注释
| collapseWhitespace: true,
| removeEmptyAttributes: true, //移除空属性
| removeAttributeQuotes: true //移除属性html标签属性的引号 ""
| },
| }),
| ],
| }
|
|
| // module.exports = vuxLoader.merge(webpackConfig, {
| // plugins: [{
| // name: 'vux-ui'
| // }]
| // }
| // );
|
|
