For questions please post on Stack Overflow and use the 'webpack' tag (http://stackoverflow.com/tags/webpack).
you run a inner server--webpack-dev-server and plan to use proxy for a back-end server?
but the hot-reload works, in a hacky way, because i used now
writeToDisk ( the bridge searches in the disk for the bundles )
can i run the webpack-dev-server without port? i mean not serve it?
Hi, I am using babel-loader with @babel/plugin-syntax-dynamic-import plugin, and it seems to be prefixing my bundled modules with './' ... e.g. './my_module', however the code generated to require them, only uses 'my_module'... no './'... If I edit the generated source and remove './' from the module definition, then it loads ok... any ideas where I should be looking in my config to identify why this is happening?
the generated script is being run in a node environment...
hey... when trying to using dynamic import for a module, my the bundle renderer throws error "render function or template not defined in component"... however if I import directly into my main file (no async), then it renders fine... I am using single file components with <template></template> for vue-loader to extract..
any thoughts on this?
Hi. I have vue project generated with vue create and the typescript option. In order to support from API calls, I have the following in my vue.config.js file:
const configure = require('./src/server/configure')
module.exports = {
devServer: {
before: configure,
https: true
}
}If I write configure.js in JavaScript it works fine. However, if I change it to TypeScript and give it a .ts extension,
I get the error:
ERROR Error loading vue.config.js:
ERROR Error: Cannot find module './src/server/configure' Is it possible to write the configure code in TypeScript and if so, what do I need to change?
ULEARN - LMS script built on Laravel 5.8 and React JS 16.4
- An application similar to UDEMY with all the basic features that needed for Learning Management System(LMS), which is completely available as an open source at GitHub.
https://www.ulearnpro.com
or is there some way to only package it once?
Is there a way to inject bundle.js content into HTML file?
what's the best way to debug a silently failing webpack build? i am using a fork of create-react-app and it just goes from "Ready to start the build." to "Exiting.. Done in 31.66s.", finishing without outputting any files or even logging out the gzip differences. my logs inside CRA run up to
compiler.run. any tips?
Am have strong knowledge in react js and node js
Am looking for new remote job now
If anyone interested on me please contact my gamil sivakumarjegadesan@gmail.com
Am looking for new remote job now
If anyone interested on me please contact my gamil sivakumarjegadesan@gmail.com
Is there some way I can access command line parameters passed to webpack-cli from the config file?
has anyone got a good template for vuejs + scss + typescript + vue?
module.exports = (env) => { .. }
@johnmarinelli in a production environment using consistent naming can be problematic from a caching perspective. Most web servers are not configured to send expiration headers for static content and many proxy servers will cache the data for an arbitrary period of time as a result to avoid checking if it has been modified. In addition to this, chunk and module names would give an attacker some insight as to how your site is designed/configured making a successful attack a little easier. E.g. by knowing what modules you use, they may be able to exploit known issues with them.
in a custom webpack script, we are using chunk.entrypoints. this was deprected in v4 - the message is: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead.
i've tried the following:
import webpack, { Entrypoint } from 'webpack'
const groups = chunk.groupsIterable
for (const group in groups) {
if (group instanceof Entrypoint) { ... }
}but then it says Entrypoint is not an object.
looking through the webpack source, it seems Entrypoint is not exported. so how exactly should I check if a module is an entrypoint?
in ./node_modules/@quasar/extras/material-icons/material-icons.css
Module build failed (from ./node_modules/@vue/cli-service/node_modules/mini-css-extract-plugin/dist/loader.js):
TypeError: Cannot assign to read only property 'exports' of object '#<Object>' module: {
rules:[
{
test:/\.vue$/,
loader: 'vue-loader',
},
{
test: /\.(sa|sc|c)ss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
// publicPath: '../',
hmr: process.env.NODE_ENV === 'development',
},
},
'css-loader',
'postcss-loader',
'sass-loader',
],
exclude: /node_modules/,
},
{
test: /\.less$/,
use: [{
loader: 'style-loader' // creates style nodes from JS strings
}, {
loader: 'css-loader' // translates CSS into CommonJS
}, {
loader: 'less-loader' // compiles Less to CSS
}]
},
{
test: /\.styl$/,
loader: 'stylus-loader'
},
{
test: /\.(ttf|eot|svg|woff|woff2)/,
loader: "file-loader",
options: {
name: "[name].[ext]",
outputPath: "fonts/",
publicPath: "../fonts/"
}
},
{
test: /\.js$/,
loader: 'babel-loader',
},
{
test: /\.(png|jpg|jpeg|gif|svg)/,
use: {
loader: 'url-loader',
options: {
outputPath: 'images/', // 图片输出的路径
limit: 100000
}
}
},
]
},
I think is it the problem that in the material-icons.css the fonts were not handling properly
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url('./web-font/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2') format('woff2'), url('./web-font/flUhRq6tzZclQEJ-Vdg-IuiaDsNa.woff') format('woff');
}
here is the vue.config.js of webpack setting
{
test: /\.(sa|sc|c)ss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
// publicPath: '../',
hmr: process.env.NODE_ENV === 'development',
},
},
'css-loader',
'postcss-loader',
'sass-loader',
],
exclude: /node_modules/,
},
{
test: /\.(ttf|eot|svg|woff|woff2)/,
loader: "file-loader",
options: {
name: "[name].[ext]",
outputPath: "fonts/",
publicPath: "../fonts/"
}
},
plugins: [
// new VueLoaderPlugin(),
new HtmlWebpackPlugin({
chunks:['index', 'vendor'],
hash:true,
minify:{
removeAttributeQuotes:true,
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
}
}),
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, 'static'),
to: path.resolve(__dirname, 'dist/static'),
ignore: ['.*']
}
]),
new webpack.ProvidePlugin({
_:'lodash'
}),
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, 'static'),
to: path.resolve(__dirname, 'dist/static'),
ignore: ['.*']
}
]),
new PurifyCSSPlugin({
paths: glob.sync(path.join(__dirname, 'src/*.html'))
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css",
ignoreOrder: false,
}),
new OptimizeCSSAssetsPlugin({
cssProcessorOptions: {safe: true}
}),
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: productionGzipExtensions,
threshold: 10240,
minRatio: 0.8
}),
new ProgressBarPlugin({
format: ' build [:bar] ' + chalk.green.bold(':percent') + ' (:elapsed seconds)'
}),
new CleanWebpackPlugin()
],
Trying to solve this problem. I have a writeup here https://github.com/unstoppablecarl/vue-webpack-css-bug I think it has to do with webpack not removing empty chunks