I'm trying to use webpack to bundle my react project. All the modules and everything loads perfectly fine after I defined the webpack_public_path variable.
Everything but the worker.
const path = require('path');
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
module.exports = {
mode: "production",
resolve: {
extensions: ["*", ".ts", ".tsx", ".js", ".mjs", ".css", ".ttf"]
},
module: {
rules: [
{
test: /\.worker\.js$/,
use: {
loader: 'worker-loader',
options: {inline: true}
},
},
{
test: /\.mjs$/,
include: /node_modules/,
type: 'javascript/auto'
},
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
{
test: /\.ttf$/,
use: ['file-loader']
},
{
test: /\.ts(x?)$/,
exclude: /node_modules/,
use: [
{
loader: "ts-loader"
}
]
}
]
},
plugins: [
new MonacoWebpackPlugin({
languages: ['markdown'],
})
],
entry: './src/index.tsx',
output: {
path: path.resolve(__dirname, 'assets'),
filename: 'graphqlschemaeditor.js'
}
};
This is my webpack.config.js
Does anyone have an idea what I'm doing wrong? Thanks a lot
Have you tried to specify an explicit publicPath?
E.g.
{
loader: 'worker-loader',
options: { publicPath: '/workers/' }
}
This may resolve loading problems.
Related
We are creating a react component, for some reason, we need it can be used in HTML directly. Like this one https://github.com/mui/material-ui/blob/master/examples/cdn/index.html. I am trying to use webpack to package my script, but it can't be used in HTML.
Here is my simple webpack config
const path = require('path');
module.exports = {
entry: glob.sync('./core/test/index.jsx'),
output: {
path: path.resolve(__dirname, 'dist'),
libraryTarget: 'global',
filename: 'test.development.js',
},
devtool : 'source-map',
module: {
rules:[
{
test: /\.svg$/,
use: {
loader: 'svg-url-loader',
options: {
encoding: 'base64'
}
}
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
{
test: /\.(css|sass|scss)$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'sass-loader'
}
]
},
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
},
],
}
]
},
mode: 'development'
};
How should I do with the script?
Before I had the following webpack.js:
const path = require('path');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const config = {
entry: {
index: path.resolve(__dirname, 'src') + '/index.jsx
},
plugins: [
new CleanWebpackPlugin({
cleanAfterEveryBuildPatterns: ['static/dist']
})
],
resolve: {
extensions: ['.js','.jsx','.css'],
alias: {
'#src': path.resolve(__dirname, 'src')
}
},
module: {
rules: [
{
test: /\.jsx?/,
loader: 'babel-loader',
exclude: /node_modules/,
query:{
presets: ['#babel/react', '#babel/preset-env'],
plugins: [
['#babel/plugin-proposal-decorators', { 'legacy': true }],
['#babel/plugin-proposal-class-properties', {'loose': true}],
'#babel/transform-runtime'
]
}
},
{
test: /\.html$/,
use: 'html-loader'
},
{
test: /\.md$/,
use: [
{
loader: "html-loader"
},
{
loader: "markdown-loader",
}
]
}
]}
};
module.exports = config;
Everything worked. After I decided to add environment variables into it I had to rewrite the content to:
module.exports = (env)=>{
const envPath = env.NODE_ENV ? `.env.${env.NODE_ENV}` : '.env';
const config = {
entry: {
index: path.resolve(__dirname, 'src') + '/index.jsx
},
plugins: [
new CleanWebpackPlugin({
cleanAfterEveryBuildPatterns: ['static/dist']
})
],
resolve: {
extensions: ['.js','.jsx','.css'],
alias: {
'#src': path.resolve(__dirname, 'src')
}
},
module: {
rules: [
{
test: /\.jsx?/,
loader: 'babel-loader',
exclude: /node_modules/,
query:{
presets: ['#babel/react', '#babel/preset-env'],
plugins: [
['#babel/plugin-proposal-decorators', { 'legacy': true }],
['#babel/plugin-proposal-class-properties', {'loose': true}],
'#babel/transform-runtime'
]
}
},
{
test: /\.html$/,
use: 'html-loader'
},
{
test: /\.md$/,
use: [
{
loader: "html-loader"
},
{
loader: "markdown-loader",
}
]
}
]}
};
return config;
}
Now I have the following error:
Insufficient number of arguments or no entry found.
Alternatively, run 'webpack(-cli) --help' for usage info.
ERROR in Entry module not found: Error: Can't resolve './src' in 'D:\path'
resolve './src' in 'D:\path'
Why now is it not working and how to fix it?
The index.jsx is in path/src folder.
Found the solution. I forgot I used merging configs so I have a webpack.dev.js which has the following line:
const common = require('./webpack.common.js');
And after the refactoring, as the webpack.common.js returns the function instead of the object the line should be changed to:
const common = require('./webpack.common.js')();
I use webpack HotModuleReplacementPlugin to let my website could hot reload when I fix the code.
But I don't know how to build two html page.
I want to build two page "index.html" & "introduction.html"
Now I use these code in my webpack.config.js but it will have a problem, in the Chrome dev tool would show
「Uncaught Error: _registerComponent(...): Target container is not a DOM element.」
How could I solved these problem?
var webpack = require('webpack');
var path = require('path');
var htmlWebpackPlugin = require('html-webpack-plugin');
var autoprefixer = require('autoprefixer');
var config = {
entry: {
index: [
'webpack-dev-server/client?http://0.0.0.0:8080',
'webpack/hot/only-dev-server',
path.resolve(__dirname, 'src/index.jsx')
],
introduction: [
'webpack-dev-server/client?http://0.0.0.0:8080',
'webpack/hot/only-dev-server',
path.resolve(__dirname, 'src/introduction.jsx')
],
},
output: {
path: path.resolve(__dirname, 'build'),
publishPath: '/',
filename: 'js/[name].js'
},
module: {
loaders: [
{
test:/\.jsx?$/,
exclude: /node_modules/,
loader: 'react-hot!babel'
},
{
test: /\.sass$/,
execlude: /node_modules/,
loader: 'style!css!postcss!sass'
},{
test: /\.scss$/,
execulde: /node_modules/,
loader: 'style!css!postcss!sass'
},
{
test: /\.css$/,
exclude: /node_modules/,
loader: 'style!css!postcss',
},
{
test: /\.(jpg|png|gif)$/,
exclude: /node_modules/,
loader: 'file?name=images/[name].[ext]'
},
{
test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/font-woff'
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/octet-stream'
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file'
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=image/svg+xml'
}
]
},
postcss: [
autoprefixer({ browsers: ['last 2 versions']})
],
resolve: {
extensions: ['', '.js', '.jsx']
},
exclude: [
/(test)/
],
devServer: {
contenBase: './dist'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new htmlWebpackPlugin({
filename: 'index.html',
template: './src/html/index.html'
}),
new htmlWebpackPlugin({
filename: 'introduction.html',
template: './src/html/introduction.html'
}),
]
}
module.exports = config;
I am trying to use css modules inside react, but it is not working.
The log of this code:
import React from 'react'
import styles from '../../css/test.css'
class Test extends React.Component {
render() {
console.log(styles)
return (
<div className={styles.app}>
<p>This text will be blue</p>
</div>
);
}
}
export default Test
returns Object {}
and the rendered code are tags with no class:
<div><p>This text will be blue</p></div>
The css code is available at site, here is my test.css:
.test p {
color: blue;
}
If I changed the div to have class='test', the color of p changes to blue
Here is my webpack.config.js
var path = require('path')
var webpack = require('webpack')
var HappyPack = require('happypack')
var BundleTracker = require('webpack-bundle-tracker')
var path = require('path')
var ExtractTextPlugin = require("extract-text-webpack-plugin")
function _path(p) {
return path.join(__dirname, p);
}
module.exports = {
context: __dirname,
entry: [
'./assets/js/index'
],
output: {
path: path.resolve('./assets/bundles/'),
filename: '[name].js'
},
devtool: 'inline-eval-cheap-source-map',
plugins: [
new BundleTracker({filename: './webpack-stats.json'}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
}),
new HappyPack({
id: 'jsx',
threads: 4,
loaders: ["babel-loader"]
}),
new ExtractTextPlugin("[name].css", { allChunks: true })
],
module: {
loaders: [
{
test: /\.css$/,
include: path.resolve(__dirname, './assets/css/'),
loader: ExtractTextPlugin.extract("style-loader", "css-loader!resolve-url-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]")
},
{
test: /\.scss$/,
include: path.resolve(__dirname, './assets/css/'),
loader: ExtractTextPlugin.extract("style-loader", "css-loader!resolve-url-loader!sass-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]")
},
{
test: /\.jsx?$/,
include: path.resolve(__dirname, './assets/js/'),
exclude: /node_modules/,
loaders: ["happypack/loader?id=jsx"]
},
{
test: /\.png$/,
loader: 'file-loader',
query: {
name: '/static/img/[name].[ext]'
}
}
]
},
resolve: {
modulesDirectories: ['node_modules'],
extensions: ['', '.js', '.jsx'],
alias: {
'inputmask' : _path('node_modules/jquery-mask-plugin/dist/jquery.mask')
},
}
}
Can anyone help me?
Thanks in advance.
Looks like your passing the css-loader params to the resolve-url-loader:
"css-loader!resolve-url-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]"
Should be:
"css-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]&importLoaders=1!resolve-url-loader"
A lot of time passed since this question, so my webpack was update many times with another technologies.
This webpack config is working:
...
module.exports = {
entry,
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/'
},
devtool:
process.env.NODE_ENV === 'production' ? 'source-map' : 'inline-source-map',
module: {
rules: [
{
test: /\.jsx?$/,
include: path.resolve(__dirname, './app/view/'),
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.pcss$/,
include: path.resolve(__dirname, './app/view/'),
use: [
{
loader: 'style-loader'
},
{
loader:
'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
},
{
loader: 'postcss-loader',
options: {
plugins: function() {
return [
require('postcss-import'),
require('postcss-mixins'),
require('postcss-cssnext')({
browsers: ['last 2 versions']
}),
require('postcss-nested'),
require('postcss-brand-colors')
];
}
}
}
],
exclude: /node_modules/
},
{
test: /\.(png|svg|jpg|webp)$/,
use: {
loader: 'file-loader'
}
}
]
},
resolve: {
extensions: ['.js', '.jsx'],
modules: [path.resolve(__dirname, 'node_modules')]
},
plugins
};
I guess that there is an issue with older versions at webpack with this line:
'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
Try importLoaders and importLoader
You can see my repo too.
In my specific case, I'm using official utility facebook/create-react-app. You have to run the following command to get access to the webpack configuration:
npm run eject
You will then need to edit config/webpack.config.js and set the css-loader modules option to true.
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules:true <-----
}),
I am trying to set this up so that I can write SCSS and have an output CSS file that's also run through Autoprefixer. My webpack config is creating a styles.css file but the content of the file is not CSS:
data:application/octet-stream;base64,ZXh...
/*# sourceMappingURL=styles.css.map*/
Here is my webpack config:
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var autoprefixer = require('autoprefixer');
var precss = require('precss');
module.exports = {
entry: "./App/index.tsx",
output: {
path: "./App/Built/",
filename: "bundle.js"
},
devtool: "source-map",
resolve: {
extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js", ".scss"]
},
module: {
loaders: [
{
test: /\.tsx?$/,
loader: "ts-loader"
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract("style", "url!css!sass")
}
],
preLoaders: [
{ test: /\.js$/, loader: "source-map-loader" }
]
},
postcss: function () {
return [autoprefixer, precss];
},
plugins: [new ExtractTextPlugin('styles.css')],
externals: {
"react": "React",
"react-dom": "ReactDOM"
}
};
I am not sure why I have a base64 encoded string instead of CSS. I suspect it's the url-loader but webpack doesn't compile my css without it.
EDIT: Got it working with this change:
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract("style", "css!postcss!sass")
},
{
test: /\.png$/,
loader: "url-loader"
},
{
test: /\.jpg$/,
loader: "url-loader"
},
{
test: /\.woff/,
loader: "url-loader"
},
{
test: /\.ttf/,
loader: "url-loader"
}