Menu
I have a very specific requirement where I need to split the JS script tag into one file and the CSS link tag into another file using HtmlWebpackPlugin.
At the moment, both script and link tags are going into both files. Is there a way to do them separately?
Here is my current Webpack file:
import webpack from 'webpack'
import path from 'path'
import HtmlWebpackPlugin from 'html-webpack-plugin'
import ExtractTextPlugin from 'extract-text-webpack-plugin'
import autoprefixer from 'autoprefixer'
const extractCSS = new ExtractTextPlugin({
filename: 'css/app.bundle.css',
allChunks: true
})
const createCSSfile = new HtmlWebpackPlugin({
chunks: ['app'],
minify: {
collapseWhitespace: true
},
hash: true,
template: 'src/ejs/css.ejs',
filename: 'templates/css.php'
})
const createJSfile = new HtmlWebpackPlugin({
chunks: ['app'],
minify: {
collapseWhitespace: true
},
hash: true,
template: 'src/ejs/js.ejs',
filename: 'templates/js.php'
})
const config = {
entry: {
'app': [
path.resolve(__dirname, 'src/js/app.js'),
path.resolve(__dirname, 'src/scss/app.scss')
]
},
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '/dist',
filename: 'js/app.bundle.js',
sourceMapFilename: 'js/app.bundle.map'
},
devtool: 'source-map',
watch: true,
watchOptions: {
ignored: /node_modules/,
aggregateTimeout: 300,
poll: 1000
},
module: {
rules: [
{
test: /\.(png|gif|jpg|jpeg)$/,
use: [
{
loader: 'file-loader',
options: {
name: '/images/[name].[ext]'
}
}
]
},
{
test: /\.(eot|ttf|woff|woff2|otf)$/,
use: [
{
loader: 'file-loader',
options: {
name: '/fonts/[name].[ext]'
}
}
]
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: [require('@babel/plugin-proposal-object-rest-spread')]
}
}
},
{
test: /\.scss$/,
use: extractCSS.extract([
{
loader: 'css-loader'
},
{
loader: 'postcss-loader',
options: {
plugins () {
return [
autoprefixer({
browsers: [
'last 2 versions',
'Safari >= 8',
'Explorer >= 9',
'Android >= 4'
]
})
]
}
}
},
{
loader: 'sass-loader'
}
])
}
]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
}
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'js/app.common',
filename: 'js/app.common.js',
minChunks: 2
}),
createCSSfile,
createJSfile,
extractCSS
]
}
export default config
Each .ejs file is empty and generates the following inside the .php files:
<head><link href="/dist/css/app.bundle.css?bdba9ec6846a7d92d61f" rel="stylesheet"></head><script type="text/javascript" src="/dist/js/app.bundle.js?bdba9ec6846a7d92d61f"></script>
Is there a way to separate them?
Also, I noticed it is inserting a head tag for the CSS link; is there a way to stop this happening?
334
- You may find it most convenient to copy the complete sample (CSS and JS included) to the HTML box, then cut and paste the CSS and JS pieces to their respective boxes. (You can remove the empty style and script elements from your HTML when done.)
You can use JavaScript code in two ways. You can keep the JavaScript code in a separate external file and then point to that file from your HTML document.
To include an external JavaScript file, we can use the script tag with the attribute src . You've already used the src attribute when using images. The value for the src attribute should be the path to your JavaScript file. This script tag should be included between the <head> tags in your HTML document.
Approach: We can separate the content & the design by using external CSS having the file extension as . css. For this, simply specify the required file path of the external file in the <link> tag inside the <head> tag in the main HTML file. This will redirect to the sheet whenever styling properties need to implement.
With help from @mootrichard I was able to get the answer I needed.
Steps to take:
inject: false in HtmlWebpackPlugin configs to stop Webpack doing this..ejs templates to loop the files array.webpack.config.babel.js
import webpack from 'webpack'
import path from 'path'
import HtmlWebpackPlugin from 'html-webpack-plugin'
import ExtractTextPlugin from 'extract-text-webpack-plugin'
import autoprefixer from 'autoprefixer'
const extractCSS = new ExtractTextPlugin({
filename: 'css/app.bundle.css',
allChunks: true
})
const createCSSfile = new HtmlWebpackPlugin({
chunks: ['css'],
excludeChunks: ['js', 'common'],
minify: {
collapseWhitespace: true,
preserveLineBreaks: true,
removeComments: true
},
inject: false,
hash: true,
template: 'src/ejs/css.ejs',
filename: 'templates/css.php'
})
const createJSfile = new HtmlWebpackPlugin({
chunks: ['js', 'common'],
excludeChunks: ['css'],
minify: {
collapseWhitespace: true,
preserveLineBreaks: true,
removeComments: true
},
inject: false,
hash: true,
template: 'src/ejs/js.ejs',
filename: 'templates/js.php'
})
const config = {
entry: {
'css': [
path.resolve(__dirname, 'src/scss/app.scss')
],
'js': [
path.resolve(__dirname, 'src/js/app.js')
]
},
output: {
path: path.resolve(__dirname, 'build'),
publicPath: '/build',
filename: 'js/app.bundle.js',
sourceMapFilename: 'js/app.bundle.map'
},
devtool: 'source-map',
watch: true,
watchOptions: {
ignored: /node_modules/,
aggregateTimeout: 300,
poll: 1000
},
module: {
rules: [
{
test: /\.(png|gif|jpg|jpeg)$/,
use: [
{
loader: 'file-loader',
options: {
name: '/images/[name].[ext]'
}
}
]
},
{
test: /\.(eot|ttf|woff|woff2|otf)$/,
use: [
{
loader: 'file-loader',
options: {
name: '/fonts/[name].[ext]'
}
}
]
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: [require('@babel/plugin-proposal-object-rest-spread')]
}
}
},
{
test: /\.scss$/,
use: extractCSS.extract([
{
loader: 'css-loader'
},
{
loader: 'postcss-loader',
options: {
plugins () {
return [
autoprefixer({
browsers: [
'last 2 versions',
'Safari >= 8',
'Explorer >= 9',
'Android >= 4'
]
})
]
}
}
},
{
loader: 'sass-loader'
}
])
}
]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
}
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'common',
filename: 'js/app.common.js',
minChunks: 2
}),
createCSSfile,
createJSfile,
extractCSS
]
}
export default config
js.ejs
<% for (let i = 0; i < htmlWebpackPlugin.files.js.length; i++) { %>
<script src="<%= htmlWebpackPlugin.files.js[i] %>"></script>
<% } %>
css.ejs
<% for (let i = 0; i < htmlWebpackPlugin.files.css.length; i++) { %>
<link rel="stylesheet" href="<%= htmlWebpackPlugin.files.css[i] %>">
<% } %>
Hope this comes to help someone else in future.
Benefit of this approach
The reason I needed to separate out JS and CSS into actual separate files was for use in WordPress, where the templates do not have a concept of a 'master' template you inherit from, but instead has basic footer and header includes.
So if you're using WordPress then this is a pretty good approach to take.
168
Since you're wanting to have separate files with different contents, you probably want to split up your entry points and the filter your chunks.
In both of your instances of HtmlWebpackPlugin, you're setting chunks: ['app'] which includes both your CSS and your JS.
You could have something like:
entry: {
'js': [
path.resolve(__dirname, 'src/js/app.js')
],
'css': [
path.resolve(__dirname, 'src/scss/app.scss')
]
},
Then you could have:
const createCSSfile = new HtmlWebpackPlugin({
chunks: ['css'],
minify: {
collapseWhitespace: true
},
hash: true,
inject: false,
template: 'src/ejs/css.ejs',
filename: 'templates/css.php'
})
const createJSfile = new HtmlWebpackPlugin({
chunks: ['js'],
minify: {
collapseWhitespace: true
},
hash: true,
inject: false,
template: 'src/ejs/js.ejs',
filename: 'templates/js.php'
})
As for the CSS being included in the <head>, you'll want to set inject: false because you're utilizing your own custom templates for creating your HTML files. https://github.com/jantimon/html-webpack-plugin#configuration
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
