我正在将一个项目从较旧版本的Webpack和Vue.js转移到Vue cli 3,该项目运行良好,但我无法确定如何使其他加载程序正常工作。加载程序是“ webpack-modernizr-loader”,该加载程序加载了modernizr,并允许我检查用户的浏览器是否可以执行promise和其他现代JavaScript功能。
我的旧webpack.config.js
看起来像这样:
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.ts',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
...
{
loader: 'webpack-modernizr-loader',
options: {
options: [
],
'feature-detects': [
'test/es6/promises',
'test/audio/webaudio',
'test/websockets'
]
},
test: /empty-alias-file\.js$/
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js',
modernizr$: path.resolve(__dirname, './empty-alias-file.js')
}
},
...
}
使用Vue cli 3,我有一个vue.congfig.js
文件,并且不确定如何将以上内容转换为文件。到目前为止,我最近的尝试是这样的:
var path = require('path')
module.exports = {
...
configureWebpack: {
module: {
rules: [
{
loader: 'webpack-modernizr-loader',
options: {
options: [
],
'feature-detects': [
'test/es6/promises',
'test/audio/webaudio',
'test/websockets'
]
},
test: /empty-alias-file\.js$/
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js',
modernizr$: path.resolve(__dirname, './empty-alias-file.js')
}
}
}
}
但这不起作用。我希望朝着正确的方向前进,或者喜欢做类似事情的现有代码示例。
谢谢!
答案 0 :(得分:4)
几个小时后,我自己解决了这个问题:
确保您的配置名为.modernizrrc
(不带.js),否则会出现各种错误。
如果我不得不猜测;这可能与babel不正确地包含它有关,并且可以通过以某种方式排除文件来逃避)。
确保已安装 webpack-modernizr-loader 和 modernizr 。
import modernizr from 'modernizr'; // eslint-disable-line no-unused-vars
我实际上还没有在JS代码中使用modernizr,但是我必须包括它才能使类呈现到HTML元素中。这就是为什么未使用它(并且在eslint中禁用了该行)的原因。
const path = require('path');
process.env.VUE_APP_VERSION = require('./package.json').version;
module.exports = {
baseUrl: '/',
configureWebpack: {
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'~': path.resolve(__dirname, 'src/'),
'@': path.resolve('src/'),
modernizr$: path.resolve(__dirname, '.modernizrrc'),
},
},
},
chainWebpack(config) {
config.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap(options => ({
...options,
compilerOptions: {
...options.compilerOptions,
preserveWhitespace: true,
},
}));
config.module
.rule('modernizr')
.test(/\.modernizrrc$/)
.use('webpack-modernizr-loader')
.loader('webpack-modernizr-loader');
},
};
(为了缩短答案长度,缩短了数组)
module.exports = {
"minify": true,
"options": [
"mq",
...
"prefixed",
],
"feature-detects": [
"test/css/all",
...
"test/css/animations",
]
}