出口2 webpack配置const
出口2 webpack配置const
提问于 2019-04-16 14:53:43
我试图构建一个webpack文件，当我需要添加“节点”目标时，问题就出现了，因为它导致了读取一些文件的'fs‘函数出现问题。然后，我将我的配置划分为web和节点。但我不太确定我做得对不对。
我现在正试着把webpack的配置分开。
我的webpack.config.js：
const VueLoaderPlugin = require('vue-loader/lib/plugin')
var path = require('path');
const webConfig = {
entry: './src/main.js',
mode: 'development',
output: {
path: path.resolve(__dirname, './dist/'),
filename: 'bundle.js'
},
resolve: {
extensions: ['.css','.jpg','.png'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': path.resolve(__dirname, './src/'),
}
},
module: {
rules: [
{ test: /\.less$/, loader: "style-loader!css-loader!less-loader" },
{ test: /\.png/, loader: "url-loader?limit=100000&mimetype=image/png" },
{ test: /\.gif/, loader: "url-loader?limit=100000&mimetype=image/gif" },
{ test: /\.jpg/, loader: "file-loader" },
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' },
{ test: /\.css$/, use: ['vue-style-loader','css-loader']}
]
}
}
const nodeConfig = {
entry: './src/main.js',
mode: 'development',
output: {
path: path.resolve(__dirname, './dist/'),
filename: 'bundle.node.js'
},
resolve: {
extensions: ['.js', '.vue','.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': path.resolve(__dirname, './src/'),
}
},
target: 'node',
node: { fs: 'empty' },
module: {
rules: [
{ test: /\.vue$/, loader: 'vue-loader' },
{ test: /\.js$/, loader: 'babel-loader' },
{ test: /\.css$/, use: ['vue-style-loader','css-loader']}
// this will apply to both plain `.css` files
// AND `<style>` blocks in `.vue` files
]
},
plugins: [
new VueLoaderPlugin()
]
}但我有这些错误。第一个问题是js文件有问题，即使我没有采取这些文件。，我在这里做错什么了？
ERROR in ./node_modules/axios/index.js
Module not found: Error: Can't resolve './lib/axios' in 'C:\Users\sdr\Documents\deficarte\node_modules\axios'
@ ./node_modules/axios/index.js 1:17-39
@ ./src/main.js
ERROR in ./node_modules/vue-style-loader/lib/addStylesClient.js
Module not found: Error: Can't resolve './listToStyles' in 'C:\Users\sdr\Documents\deficarte\node_modules\vue-style-loader\lib'
@ ./node_modules/vue-style-loader/lib/addStylesClient.js 7:0-41 57:15-27 69:15-27
@ ./node_modules/bootstrap/dist/css/bootstrap.min.css回答 1
Stack Overflow用户
回答已采纳
发布于 2019-05-02 13:10:20
尝尝这个
const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
var path = require('path');
const webConfig = {
entry: './src/main.js',
mode: 'development',
output: {
path: path.resolve(__dirname, './dist/'),
filename: 'bundle.js'
},
resolve: {
extensions: ['.css','.jpg','.png','.js','.vue'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': path.resolve(__dirname, './src/'),
}
},
module: {
rules: [
{ test: /\.less$/, loader: "style-loader!css-loader!less-loader" },
{ test: /\.png/, loader: "url-loader?limit=100000&mimetype=image/png" },
{ test: /\.gif/, loader: "url-loader?limit=100000&mimetype=image/gif" },
{ test: /\.jpg/, loader: "file-loader" },
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' },
{ test: /\.vue$/, loader: 'vue-loader' },
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }, //query: {presets: ['es2015']}
{ test: /\.css$/, use: ['vue-style-loader','css-loader']}
// this will apply to both plain `.css` files
// AND `<style>` blocks in `.vue` files
]
},
plugins: [
new VueLoaderPlugin()
]
}
const nodeConfig = {
entry: './src/main.js',
mode: 'development',
output: {
path: path.resolve(__dirname, './dist/'),
filename: 'bundle.node.js'
},
resolve: {
extensions: ['.js', '.vue','.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': path.resolve(__dirname, './src/'),
}
},
target: 'node',
node: { fs: 'empty' },
module: {
rules: [
// { test: /\.json/, loader: "raw-loader" },
{ test: /\.vue$/, loader: 'vue-loader' },
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }, //query: {presets: ['es2015']}
{ test: /\.css$/, use: ['vue-style-loader','css-loader']}
// this will apply to both plain `.css` files
// AND `<style>` blocks in `.vue` files
]
},
plugins: [
new VueLoaderPlugin()
]
}
module.exports = [ webConfig, nodeConfig ];
// var webpackConfig = merge(baseWebpackConfig, {
// plugins: [
// // service worker caching
// new SWPrecacheWebpackPlugin({
// cacheId: 'my-vue-app',
// filename: 'src/service-worker.js',
// staticFileGlobs: ['dist/*/.{js,html,css}'],
// minify: true,
// stripPrefix: 'dist/',
// runtimeCaching: [
// {
// urlPattern: /^https:\/\/js\.api\.here\.com\/v3\/3.0\/mapsjs-core\.js\//,
// handler: 'cacheFirst'
// },
// {
// urlPattern: /^https:\/\/(\d+)\.media\.tumblr\.com\//,
// handler: 'cacheFirst'
// },
// ]
// })
// ]
// })页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55711077
复制相关文章
相似问题
腾讯云开发者
