I am trying to find a way to change the file location at compilation.
In my project, some assets files are defined in public/aclib/. However I would like to get them in /public only in the compiled version as that's what the code uses.
Of course, I could just put those files directly in public/ in the project, but I'd like them to be in a subfolder for the project clarity.
Is this possible at all?
Thanks a lot for your help.
Search for copy-webpack-plugin
For example, in vue.config.js add property:
configureWebpack: {
new CopyPlugin({
patterns: [
{ from: "public/aclib", to: "public" }
],
}),
}
Related
I have a VUE2 project and in the public folder I created an iframe.html file that will be loaded in an iframe.
That iframe will also load a javascript.js file that I want encoded/uglified upon "npm run build" but I also want to be able to access it during dev.
How could I proceed?
Should this js file be placed inside the /src/assets/ folder and referenced from the iframe.html file? If yes, any advice?
Or should it stay in the public folder and upod the dist folder being built, encode it with something.
Any solution is welcome, thanks in advance!
Edit: Here are further details of how I use the iframe.
First, I'm referencing the .vue file in the router like so:
{
path: "/pages/:id/edit",
name: "edit",
component: () => import("../views/Edit.vue"),
},
Next, in the Edit.vue file, I add the iframe like so (note how it's referencing iframe.html that is in the public directory):
<iframe
id="iframe"
ref="iframe"
src="iframe.html"
/>
Next, in the iframe.html it's just normal html code, with this part including the javascript.js file (that actually is in the public folder as well for now)
<script src="javascript.js"></script>
You can explicitly include the .js file in your Webpack config by adding a rule for UglifyJsPlugin:
npm i -D uglifyjs-webpack-plugin
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
...
module.exports = {
optimization: {
minimizer: [
new UglifyJsPlugin({
include: /\/regex-for-file/,
minimize: true
})
]
}
...
};
In Vue.config.js, this might look like:
configureWebpack: {
plugins : [
new webpack.optimize.UglifyJsPlugin({
uglifyOptions: {
include: /\/regex-for-file/,
minimize: true
}
)}
]
}
Another option is to use uglify-es; this would allow you to get even more explicit by specifying from where to copy the file during build (assuming you might want the file located outside of src/):
npm i -D uglify-es // CopyWebpackPlugin ships w/ Vue's Webpack conf by default
const UglifyJS = require('uglify-es');
const { resolve } = require('path');
const resolveAbs = (dir) => resolve(__dirname, dir);
new CopyWebpackPlugin([
{
from: resolveAbs('../external'),
to: config.build.assetsSubDirectory
},
{
from: resolveAbs('../src/custom-build-path'),
to: config.build.assetsServerDirectory,
transform: (content, path) => UglifyJS.minify(content.toString()).code;
}
]),
To be able to access it during dev, you can include the path of the js file (relative to your Vue src directory) using the resolve.alias option in the config (so you don't need to deal with possibly ridiculous relative paths in your project). Finally, you can look into webpack's HTML plugin docs for info on importing an external index.html file if needed
I would recommend not putting it in static; by default it will not be minified and built if placed in that directory.
Update/edit: Sorry, I saw a 'uglify' and just assumed you wanted uglify js. As long as the script is in your Vue project directory (or otherwise specified in the Webpack config) the file should be minified during build. Vue has pretty smart defaults for Webpack; assuming the iframe is being referenced somewhere in the app i.e. the dependency graph it will be built.
I have the following vue.config.js (showing just the relevant part)
pwa: {
workboxPluginMode: 'InjectManifest',
workboxOptions: {
swSrc: 'src/plugins/service-worker/service-worker.js',
exclude: [/.*images\/(?!cached).*/g, /\.map$/, /manifest\.json$/]
}
},
I'm looking to exclude all ./src/assets/images/* images unless they are in the following directory:
./src/assets/images/cached/*
Here is an example of this regex working: https://regex101.com/r/vANnrn/1/
However webpack/workbox still includes all of my images that might be included in components in the precache-manifest file.
My suspicion is that the exclude option applies to the folder structure of assets inside /dist rather than /src? If that's the case this won't work because webpack puts all images into a flat /dist/img folder.
I'm using Vuejs in a new project and I've added some images to the assets folder. I need an image to be referenceable also in public/index.html, but when I build the project the resulting filename includes an hash.
For instance I've src/assets/logo.svg and after build I've dist/img/logo.e80b121e.svg, but I want dist/img/logo.svg
Is there a way to remove the hash only for a specific file? I need the hash in the other assets. I'm configuring webpack with vue.config.js.
If you're using the webpack config vue cli generated four you if you move your asset in the static folder it will not get the hash.
Items from assets are getting hashed.
You need to get out the assets files from the entry, assuming that you has chunckhash configured (something like this: output: {filename: "[name].[chunkhash].js"}).
You could copy directly from source and add the assets to index.html using some of this webpack plugins:
CopyWebpackPlugin
HtmlWebpackExternalsPlugin
example:
plugins: [
new HtmlWebpackExternalsPlugin({
externals: [
{
module: "#fortawesome/fontawesome-pro",
entry: "css/all.css",
},
],
}),
new CopyWebpackPlugin([
{
from: "./node_modules/#fortawesome/fontawesome-pro/webfonts",
to: "./vendor/#fortawesome/fontawesome-pro/webfonts/",
},
]),
]
My goal is to provide a css file in the distribution package which can be used by the consumer if needed.
For that I would like to create a kind of global scss file, but I want to avoid that this style is attached to each component + it also won't be used directly by the components. So for that I would like to create my-style.scss file somewhere in the /src folder.
What would be the best way to compile this file to my-style.css and copy it to the dist folder?
It is possible to specify a global style with Stencil. Simply add the globalStyle property to your stencil.config.js and provide the entry scss file. Your config should look something like this:
const sass = require('#stencil/sass');
exports.config = {
namespace: 'my-component-lib',
outputTargets:[
{
type: 'dist'
},
{
type: 'www',
serviceWorker: false
}
],
globalStyle: 'src/globals/app.scss',
plugins: [
sass()
]
};
exports.devServer = {
root: 'www',
watchGlob: '**/**'
}
The build will successfully compile the scss to dist/my-component-lib.css.
From the docs: https://stenciljs.com/docs/config/#copy
The copy config is an array of objects that defines any files or
folders that should be copied over to the build directory. Each object
in the array must include a src property which can be either an
absolute path, a relative path or a glob pattern. The config can also
provide an optional dest property which can be either an absolute
path or a path relative to the build directory. Also note that any
files within src/assets are automatically copied to www/assets for
convenience.
In the copy config below, it will copy the entire directory from
src/docs-content over to www/docs-content.
Within stencil.config.ts:
copy: [
{ src: 'docs-content' }
]
For example I am copying my css file from src to the build directory and it's totally standalone, e.g. https://github.com/BlazeUI/blaze/blob/master/packages/atoms/stencil.config.ts#L14
I made a project with the cli and I have some css and js files in the assets folder that was generated. I am trying to add them to the index.html file but it keeps coming back as a 404. Is there a different way I need to add my local css and javascript files?
Assuming you're using the webpack template, try /src/assets/... in the index.html
In your webpack config file, you can add an alias for your assets folder:
module.exports = {
...
resolve: {
alias: {
'assets': path.resolve(__dirname, '../src/assets'),
},
...
},
...
},
Then, in your application, you can reference this folder like so:
// in a .less file
#import "~assets/css/vars"
// in a .js file
require("assets/js/utils")