I have following folder setup:
app/
scss/
lib/
grid.css
main.scss
webpack/
webpack.config.js
in my webpack.config.js I have following loaders to handle scss and css:
{
test: /\.(css|scss)$/,
exclude: path.join(__dirname, '..', 'app/scss/lib/'),
loader: ExtractTextPlugin.extract(
'style-loader', 'css-loader?module!resolve-url!postcss-loader!sass-loader?sourceMap'
)
},
{
test: /\.(css|scss)$/,
include: path.join(__dirname, '..', 'app/scss/lib/'),
loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
}
idea here is that css-loader uses modules essentially rewriting a class name like .red to something random like .JHSKJasdasa however, I want it to exclude /lib folder and leave classes that are in it same as they are (vanilla), however still, classes inside grid.css like .container become randomized.
Likely answer is that webpack is getting confused by the path.join - documentation specifies path.resolve. I think it might do a straight string comparison of the paths, so the relative .. is breaking it, therefore the exclusion/inclusion isn't working correctly. path.resolve should resolve to the absolute path.
If that doesn't work, try adding a folder app/scss/src (or similar) to separate out the code you want to use css-loader on. Then include that rather than excludeing lib.
Related
I have a very simple tutorial project that I built which consists of no more than 100-200 lines of code.
When I build this project with webpack I end up with a bundle.js file which is being flagged as being above the recommended size of a bundle.js file. I find this unsettling because I know that my code is very small. How is it that with only using a few things like vuex, vue.js and a few node modules ending up with such an oversized bundle.js?
I understand that it packages everything up for us, but I find it hard to believe that with such a small project webpack would be unable to get it down to a much smaller size. I am concerned that this might have something to do with the sheer number of node modules I have in that project root directory.
So my question is this: does the webpack build depend at all on what node-modules are in my directory under the /node_modules/ folder? If not, then how have I already exceeded the recommended size for a bundle.js with my first ever vue project?
This brings me to another question which I have been very unsure of: Is it normal for vue to copy over almost my entire node_modules directory from my root user directory? When I watch tutorials, the "vue create My_App" command seems to finish executing in no more than 10-20 seconds, but when I run the command it can take minutes. When I was wondering what it could be I saw that it copied hundreds and hundreds of node_modules over... is that entirely necessary? Is there a configuration or setting I should have set or changed that I missed?
Thank you all for any insight you might be willing to offer, big or small.
// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
entry: './src/main.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/dist/'
},
mode: 'development',
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
// this will apply to both plain `.js` files
// AND `<script>` blocks in `.vue` files
{
test: /\.js$/,
loader: 'babel-loader'
},
// this will apply to both plain `.css` files
// AND `<style>` blocks in `.vue` files
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.common.js'
}
},
plugins: [
// make sure to include the plugin for the magic
new VueLoaderPlugin(),
],
optimization: {
minimizer: [new UglifyJsPlugin()],
},
};
Use tools like https://nx.dev/
You can find video here https://youtu.be/mVKMse-gFBI
I have a websites, written mostly in pug (html preprocessor). I use output.publicPath equal to '/' so I can run webpack in development mode and work easily, treating project folder as a root one, but every href, src and url is an absolute path. I want to change every path by adding some nodes (let's use '/path/to/' for example) in the begging, when I build project. For example, I have an image
img(src="/img/image.jpg")
And after I build this project, I want to receive this:
<img src="/path/to/img/image.jpg">
And to receive the same with hrefs and urls.
I made a webpack build config and setted output.publicPath to '/path/to/' but it changed the pathes of linked css and js files:
mode: "production",
output: {
publicPath: "/HTMLPractice/dist/"
}
I'll be glad to receive any solution, idea or recommendation.
You can set publicPath on the file-loader, so long as the file-loader regex contains the image files.
In your webpack.config.js rules:
{
test: /\.(png|jpe?g|gif)$/i,
loader: 'file-loader',
options: {
publicPath: 'some/path',
},
},
More info: https://webpack.js.org/loaders/file-loader/#publicpath
Say I have following project structure (Well its more complex than below structure):
CommonComponents
CommonComponentA
CommonComponentB
package.json
webpack.config.js
.babelrc
ModuleA
ComponentC //import CommonComponentA
ComponentD
package.json
webpack.config.js
.babelrc
ModuleB
ComponentE //import CommonComponentB
ComponentF
package.json
webpack.config.js
.babelrc
I compile, bundle and utilize ModuleA and ModuleB separately. When I switched to babel 7, importing modules from CommonComponents directory stopped working. Babel ignores files which are outside current working directory and doesn't transpile them so webpack compilation fails complaining 'Unexpected token' at imported component.
From what I have understood so far, they have changed the way .babelrc lookup happens. I really can't wrap my head around the terms 'root', 'babelrcRoots', etc.
Can someone explain what I will need to do in order to compile ModuleA and ModuleB succesfully from their respective working directory ?
Based on the real structure of your project (it is a monorepo setup with a root folder?) and the webpack config you are using, you can have several ways to solve this, one way could be by adding the include key on you babel loader rule on webpack configuration files, you will end up with something like this:
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
include: path.resolve(__dirname, '../CommonComponents'),
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env']
}
}
}
]
}
as stated before, this depends on your real project structure, but you can give it a try and check it works.
I want to have one tag per required .css file.
I want it like that because I want to connect chrome dev-tools workspace feature to my src folder, so I could edit my css files directly from the browser.
Here's my research on loaders:
style-loader only loads into style tags
style-loader/url + file-loader doesn't work (I tried the README example)
extract-text-webpack-plugin seems to only generate ONE bundle per ALL css files with default configuration.
The Modify Files section in extract-text-webpack-plugin suggests that with multiple entry points, it's possible to generate multiple bundles, so I thought that it might be possible to abuse this feature to get the behaviour I want.
This is of course for development and I don't intend on serving my css this way.
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
}
]
},
plugins: [
new ExtractTextPlugin('[name].css'),
new HtmlWebpackPlugin({
template: 'path/to/your/index.html',
})
],
resolve: {
extensions: [ '.js', '.css' ]
}
Then in your js files, do import path/to/your/stylesheet.css; for each stylesheet you want webpack to extract.
Note: you need to install html-webpack-plugin and add it like above so that webpack can insert references to your stylesheets. Click HERE to learn more about the options for HtmlWebpackPlugin
What I'm trying to do is configure webpack in a way that would copy all the partial html templates that are required in angular 1.x directives etc. into a separate folder (just like the file-loader does for assets referenced from css). I don't want the partial htmls to be included in my javascript bundle but rather have all of them in one folder with hashed names.
I tried configuring the file-loader to do it but when I run webpack in watch mode it also copies the those html in the dist folder again to it appending a new hash and essentially makes an infinite loop as every new html that shows up in that folder is copied, thus a new html appears and again and again. I tried to set an exclude matching pattern for that loader but webpack was still running constantly watching over that folder.
Here is the excerpt of my webpack.config.js file:
module: {
loaders: [
test: /\.html$/,
exclude: /bundle\/templates/,
loader: `file-loader?name=bundle/templates/[name]-[hash].[ext]
]
}
is there a loader that would help me do what I want without resorting to hacks?
Ok I have found the answer. The problem wasn't the file-loader which is configured correctly like this even without the exclude. What caused the infinite loop was a dynamic require that created a regex that matched those copied assets too... So by setting a proper context for this dynamic require the problem was resolved.
In the webpack.config file you can use the same way like this in the loader section.
{
test: /\.html$/,
exclude: path.resolve(__dirname, 'index.html'),
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'views/'
}
},
And in the plugins section of the webpack.config file
plugins: [
new HtmlWebpackPlugin({
template: 'index.html',
inject: true
}),
new ExtractTextPlugin('bundle.css')
]
This will copy all the htmls and will be refered from the index.html