In the webpack.config.js file we can set entry file as below.
module.exports = (env = {}, argv = {}) => {
const config = {
entry: {
main: './src/js/main.js'
},
}
}
But in vue.config.js file, how to declare the entry file? I have checked in doc. but there is property such that.
Vue CLI 3 integrates the webpack-chain library as another way of configuring webpack.
For example, your config file may look like:
chainWebpack: config => {
// clear the existing entry point
config
.entry('main')
.clear()
// add your custom entry point
config
.entry('main')
.add('./src/js/main.js')
}
See the section on config entryPoints.
For vue-cli 4 it's:
chainWebpack: (config) => {
// Clear the existing entry point
config.entry('app').clear()
// Add the custom entry point
config.entry('app').add('./src/js/main.js')
}
Related
I have Vue.js project I've setup previously that dynamically adds defined .scss files to my .vue template files, so I can access my variables, mixins, etc. in the templates without #importing them, or having them duplicate code from imports.
My problem is I'm setting up a NativeScript/Vue.js project with vue-cli-plugin-nativescript-vue and was curious if anyone has successfully setup their webpack to allow the same functionality. It's my understanding that the plugin replaces webpack with the latest when you run, as specified in the docs https://cli.vuejs.org/guide/webpack.html#replacing-loaders-of-a-rule.
Below is my vue.config.js (which compiles with no error) but doesn't seem to be working. I'm probably missing something or don't understand exactly how this is working, any help is appreciated.
const path = require('path')
module.exports = {
chainWebpack: config => {
const ofs = ['vue-modules', 'vue', 'normal-modules', 'normal']
const cssRules = config.module.rule('css')
const postRules = config.module.rule('postcss')
const addSassResourcesLoader = (rules, type) => {
rules
.oneOf(type)
.use('sass-resoureces-loader')
.loader('sass-resources-loader')
.options({
resources: './src/styles/_global.scss', // your resource file or patterns
})
}
ofs.forEach(type => {
addSassResourcesLoader(cssRules, type)
addSassResourcesLoader(postRules, type)
})
return config
},
}
Vue CLI provides a config to augment your CSS loaders:
// vue.config.js
module.exports = {
css: {
loaderOptions: {
scss: {
// sass-loader#^8.0.0
prependData: `import "~#/styles/_global.scss";`,
// sass-loader#^9.0.0 or newer
additionalData: `import "~#/styles/_global.scss";`,
}
}
}
}
I'm trying to add the correct pdf loader to my nuxt.config.js file but nothing seems to be working so far. This is what I have in my build config, I'm pretty sure I need to add another rule to get pdf working but is not happening.
extend(config, ctx) {
// Run ESLint on save
if (ctx.isDev && ctx.isClient) {
config.module.rules.push({
enforce: "pre",
test: /\.(js|vue)$/,
loader: "eslint-loader",
exclude: /(node_modules)/,
});
}
},
},
I had the same issue with my downloadable pdf files and solved it by moving the download's folder to the static directory.
You are able to archive this by extending the build config in the nuxt.config.js.
module.exports = {
build: {
extend(config) {
// Find the rule which contains a assets file extension
const assetsLoader = config.module.rules.find(rule => rule.test.test('.png'));
// Overwrite the test regex and add `pdf`
assetsLoader.test = /\.(png|jpe?g|gif|svg|webp|pdf)$/i;
return config;
},
},
};
One of the ways to resolve it is by loading the instance of jspdf in the client-side.
if(process.client) {
const jsPDF = require('jspdf');
require('jspdf-autotable');
let doc = new jsPDF();
// ...your code
}
As per the Nuxt Documentation, check this out Window Document Undefined.
Here I am using tensor flow with react native using react-native-tensorflow llibrary. The library has installed properly. The code snippet which I am using and facing an issue is
const tfImageRecognition = new TfImageRecognition({
model: require('./assets/tensorflow_inception_graph.pb'),
labels: require('./assets/tensorflow_labels.txt'),
imageMean: 117, // Optional, defaults to 117
imageStd: 1 // Optional, defaults to 1 })
In the model property, when I am loading the tensorflow_inception_graph.pb file then it is giving me the error
error: bundling failed: UnableToResolveError: Unable to resolve module
`../asset/tensorflow_inception_graph.pb` from
`/Users/XYZ/App/code/Demo/src/ImageRecognitionAI.js`:
could not resolve `/Users/XYZ/App/code/Demo/src/assets/tensorflow_inception_graph.pb'
as a file nor as a folder
The file path which I am passing in model is checked and found correct. Can anyone help me to get out of this? Help will be appreciated.
place the tenserflow_labels.text and tensorflow_inception_graph.pb and file in the assets folder
=> android/app/src/main/assets/tensorflow_inception_graph.pb
=> android/app/src/main/assets/tenserflow_labels.text
now you can access it like this in your js file.
const tf = new TfImageRecognition({
model: 'file://tensorflow_inception_graph.pb',
labels: 'file://tenserflow_labels.txt'
});
it worked for me.
You have to specify the webpack type extensions in either the package or a rn-cli.config.js file. If you're using create-react-native-app then you want to add it to the app.json file like this:
{
"expo": {
"sdkVersion": "27.0.0",
"packagerOpts": {
"assetExts": ["pb", "txt"]
}
}
}
I didn't find that in the documentation for some reason, but I found it in some example projects.
If you're running your scripts with react-native start then you need to setup a rn-cli.config.js file. Here is the documentation
module.exports = {
getAssetExts() {
return ['pb', 'txt']
}
}
If you are running scripts from rn-cli.config.js
change file content to :
const { getDefaultConfig } = require("metro-config");
module.exports = (async () => {
const {
resolver: { assetExts }
} = await getDefaultConfig();
return {
resolver: {
assetExts: [...assetExts, "pb", "txt"]
}
};
})();
When I run npm run build I get the following error message.
[copy-webpack-plugin] unable to locate 'path\to\project\public' at 'path\to\project\public'
I moved the public folder to src/main/resources/public. However I can't find a config to change the path. I think the relevant code is in node_modules\#vue\cli-service\lib\config\app.js
// copy static assets in public/
webpackConfig
.plugin('copy')
.use(require('copy-webpack-plugin'), [[{
from: api.resolve('public'),
to: api.resolve(options.outputDir),
ignore: ['index.html', '.DS_Store']
}]])
How do I override this in vue.config.js?
This works for me using vue-cli 3.0. Just add it to your vue.config.js file.
module.exports = {
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
return [{template: '/path/to/index.html'}]
})
}
}
Though this might be more technically correct.
module.exports = {
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
args[0] = {
template: '/path/to/index.html'
}
return args
})
}
}
Edit:
Actually this would be the preferred way of doing this so that none of the other defaults are overwritten.
module.exports = {
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
args[0].template = '/path/to/index.html'
return args
})
}
}
I have several webpack configurations with very similar webpack.config files. I like to put webpack.config parts in a shared module that (I include the shared module with "npm link"), but that doesn't work as can't find dependencies, like "webpack" as it's the first dependency it encounters.
17 07 2017 14:49:32.694:ERROR [config]: Invalid config file!
Error: Cannot find module 'webpack'
at Function.Module._resolveFilename (module.js:470:15)
First webpack.config lines:
const webpack = require('webpack');
const path = require('path');
....
How can I instruct webpack to search for the included dependences in node_modules of the project that includes the webpack.config?
I tried to realise this by adding the following to the resolve webpack.config section, but that doesn't help:
modules: [path.resolve(__dirname, "node_modules"), "node_modules"]
I think it's not used by the webpack.config itself but by the JS code that is processed by webpack.config.
I solved it by passing in required root dir as argument to the common webpack config, and use that to change the __dirname variable that is used to find plugins and other stuff.
In code:
The webpack.config.js:
const path = require('path');
const loader = require('lodash/fp');
const common = require('bdh-common-js/etc/webpack/webpack.config.common');
module.exports = function (env) {
if (env === undefined) {
env = {};
}
env.rootdir = __dirname; // Add the root dir that can be used by the included webpack config.
const result = loader.compose(
function () {
return common(env)
}
// Any other "fragments" go here.
)();
// Customize the webpack config:
result.entry = {
entry: ['./src/entry.js', './src/js/utils.js'],
}
result.resolve.alias.Context = path.resolve(__dirname, 'src/js/context');
...... more stuff..
return result;
}
And the common webpack.config part that receives the argument:
module.exports = function (env) {
if (env !== undefined) {
if (env.rootdir !== undefined) {
__dirname = env.rootdir;
}
}
....
const node_modules = path.resolve(__dirname, 'node_modules');
const webpack = require(node_modules + '/webpack');
const CleanWebpackPlugin = require(node_modules + '/clean-webpack-plugin');
....
}