I have a Rust, Web assembly wasm app I need to deploy to an apache server. When upload the build, it doesn't run the software, it just shows a list of the files.
The build files look like this:
build
-0.bootstrap.js
-bootstap.js
-gfdgjkljlkjjiojohio.module.wasm
my webpack config looks like
const path = require('path');
module.exports = {
entry: "./bootstrap.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bootstrap.js",
},
mode: "development",
devServer: {
//host: "0.0.0.0",
port: 8080,
}
};
Where boostrap.js imports the main index.js file
// A dependency graph that contains any wasm must all be imported
// asynchronously. This `bootstrap.js` file does the single async import, so
// that no one else needs to worry about it again.
import("./index.js")
.catch(e => console.error("Error importing `index.js`:", e));
But when I deploy to my apache server, to my domain, I don't get the software running.
Why isn't it running?
I had to use HtmlWebpackPlugin and change my webpack config to this
module.exports = {
entry: './bootstrap.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
filename: 'index.html',
inject: true,
template: path.resolve(__dirname, 'index.html'),
}),
]
}
in my project its my vue.config.js:
const webpack = require("webpack")
module.exports = {
productionSourceMap: false,
configureWebpack: {
plugins: [
new webpack.NormalModuleReplacementPlugin(
/(.*)-APP_TARGET(\.*)/,
function (resource) {
resource.request = resource.request.replace(
/-APP_TARGET/,
`-${process.env.BUILD_TARGET}`
);
}
)
]
}
};
but this plugin only replaces module names inside .vue files, i need to replace import statements for main.js and some other .js files
I'm using vue-cli 2.9.6, and created a vue project using vue init webpack <project name>.
When I call vue run build, it is creating a number of different js files (and names change each time...):
vendor.20d54e752692d648b42a.js
vendor.20d54e752692d648b42a.js.map
app.ed70f310595763347909.js
app.ed70f310595763347909.js.map
manifest.2ae2e69a05c33dfc65f8.js
manifest.2ae2e69a05c33dfc65f8.js.map
And also css files like this:
app.a670fcd1e9a699133143a2b144475068.css
app.a670fcd1e9a699133143a2b144475068.css.map
I would like the output to simply be 2 files:
build.js { for all js }
styles.css { for all css }
How can I achieve this?
for preventing creation of vendor.js and manifest.js just remove following code from webpack.prod.conf.js
// split vendor js into its own file
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks (module) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
}),
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
minChunks: Infinity
}),
To prevent sourceMaps set in config/index.js the variable productionSourceMap from true to false
Changing name of app.js to build.js can be obtained modifying the entry and outputproperties in webpack.base.conf.js this way:
entry: {
build: './src/main.js'
},
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},
Update name of the css output file updating options of ExtractTextPluginin webpack.prod.conf.js to filename: utils.assetsPath('css/styles.css'),
// vue.config.js
module.exports = {
chainWebpack: config => {
if(config.plugins.has('extract-css')) {
const extractCSSPlugin = config.plugin('extract-css')
extractCSSPlugin && extractCSSPlugin.tap(() => [{
filename: 'styles.css',
chunkFilename: 'styles.css'
}])
}
},
configureWebpack: {
output: {
filename: 'build.js',
chunkFilename: 'build.js'
}
}
}
or
module.exports = {
configureWebpack: {
optimization: {
splitChunks: false
}
},
filenameHashing: false
}
I built my simple site using Vue UI (the ones that comes with Vue-CLI 3), and it created sourcemaps in the /dist folder. I deploy these sourcemaps along with the production files. When I load up my site, Chrome indicates it cannot parse the sourcemaps in Devtools.
DevTools failed to parse SourceMap: https://www.thisisnotarealdomain.net/js/app.92ef018b.js.map
I have tried the following in vue.config.js:
module.exports = {
css: {
// modules: true,
loaderOptions: {
// pass options to sass-loader
sass: {
// #/ is an alias to src/
// so this assumes you have a file named `src/scss/variables.scss`
data: `#import "#/scss/_globals.scss";`
}
}
},
configureWebpack: {
devtool: '#source-map'
}
}
and
module.exports = {
css: {
// modules: true,
loaderOptions: {
// pass options to sass-loader
sass: {
// #/ is an alias to src/
// so this assumes you have a file named `src/scss/variables.scss`
data: `#import "#/scss/_globals.scss";`
}
}
},
configureWebpack: {
devtool: '#cheap-eval-source-map'
}
}
But Chrome still complains and I cannot see my original source.
I found some articles on the Internet regarding Webpack and Chrome interaction with sourcemaps, but I cannot tell if the problem has been resolved. Is there a problem with sourcemaps created by Vue UI?
Thanks.
I'm converting my ongoing Vue.js app over to use vue-cli/Webpack and imported modules Something I'm finding rather tedious at the moment is specifying the relative paths for imports accurately. E.g. import bus from '../../bus', import Cell from '../Cell'. Easy to make a mistake.
I'm assuming it must be straightforward enough to specify a base or root directory and specify absolute paths from that, but I can't see where one would do that. For example, in the standard vue-cli webpack setup, the code I'm working on is all in the 'src' directory, inside which I have 'components', 'mixins', etc. It would be handy if I could use import xxx from 'components/xxx', import yyy from 'components/a/yyy'. How would I do that?
With vue-cli, you put webpack settings in vue-config.js, in the same folder as package.json.
vue-config.js:
var path = require('path')
module.exports = {
configureWebpack: {
resolve: {
alias: {
src: path.resolve(__dirname, 'src')
}
},
}
}
This will allow you to do
import HelloWorld from 'src/components/HelloWorld.vue'
instead of
import HelloWorld from '../components/HelloWorld.vue'
See https://cli.vuejs.org/config/#vue-config-js for more info.
The solution is already in place, in fact, just not well-documented. In webpack.base.conf.js, there is this:
resolve: {
extensions: ['', '.js', '.vue', '.json'],
fallback: [path.join(__dirname, '../node_modules')],
alias: {
'vue$': 'vue/dist/vue.common.js',
'src': path.resolve(__dirname, '../src'),
'assets': path.resolve(__dirname, '../src/assets'),
'components': path.resolve(__dirname, '../src/components')
}
}
I've added my own alias, 'mixins': path.resolve(__dirname, '../src/mixins'). So I can now use e.g. import Field from 'mixins/Field', along with e.g. import ScrollableTable from 'components/ScrollableTable'.
I am using laravel and the laravel-mix package.
To make it work add this to your webpack.mix.js :
const path = require('path');
mix.webpackConfig({
resolve: {
alias: {
'#': path.resolve(__dirname, 'resources/js')
},
},
});
You can use something like this:
import { routes } from '#/router/routes'
where /router folder is on the root of my project and I can import my routes anywhere :)
Note: I'm using VueJS 2.0
Create a vue.config.js file at the project root that will contain
var path = require('path');
module.exports = {
configureWebpack : {
resolve: {
modules : [
path.resolve("./src"),
path.resolve("./node_modules")
]
},
}
}
Just use # symbol as root in the path for the import.
For example, let's say you have a firebase folder under root and a firebaseConfig.js
file like this
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "...somekey...",
authDomain: "...someApp....firebaseapp.com",
databaseURL: "https://...someApp....firebaseio.com",
projectId: "...someProjId...",
storageBucket: "",
...bla bla bla...
};
export default firebaseConfig;
in the firebase folder.
You can import the config file anywhere using the following instruction:
import firebaseConfig from '#/firebase/firebaseConfig'
Late answer: To create an alias for all folders inside src. Uses Damian Helme solution. All credits should go to him.
Allows you to import:
import HelloWorld from 'components/HelloWorld.vue'
From:
import HelloWorld from '../components/HelloWorld.vue'
Create vue.config.js on the root folder of the project. Note: Doesn't automatically update when new folders are created, you will need to manually restart.
const path = require('path');
const fs = require('fs');
//Find all files in src and make alias
const dirs = fs.readdirSync(path.resolve(__dirname, 'src'));
const alias = {
src: path.resolve(__dirname, 'src')
}
dirs.forEach(name => {
const filePath = path.resolve(__dirname, 'src', name);
//Only add folders
if (fs.statSync(filePath).isDirectory()) {
alias[name] = filePath;
}
});
module.exports = {
configureWebpack: {
resolve: {
alias
},
}
}
Create vue.config.js file on the root directory
const path = require('path');
module.exports = defineConfig({
configureWebpack: {
resolve: {
alias: {
src: path.resolve(__dirname, 'src')
}
}
}
})
Once after done with the configuration. We can now able to target the file inside src directory using below import statement.
import About from src/component/About.vue
If you have another main folder inside the src directory. You can achieve by using the below command.
package: path.resolve(__dirname, 'src/package')