Mic*_*umo 15 javascript webpack html-webpack-plugin webpack-2
我有一个非常具体的要求,我需要将JS脚本标记拆分为一个文件,将CSS链接标记拆分为另一个文件HtmlWebpackPlugin.
目前,这两个脚本和链接标签进入这两个文件.有没有办法单独进行？
这是我当前的Webpack文件:
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
每个.ejs文件都是空的,并在.php文件中生成以下内容:
<head><link href="/dist/css/app.bundle.css?bdba9ec6846a7d92d61f" rel="stylesheet"></head><script type="text/javascript" src="/dist/js/app.bundle.js?bdba9ec6846a7d92d61f"></script>
有没有办法将它们分开？
另外,我注意到它正在head为CSS链接插入一个标签; 有没有办法阻止这种情况发生？
Mic*_*umo 12
在@mootrichard的帮助下,我得到了我需要的答案.
采取的步骤:
inject: false在HtmlWebpackPluginCONFIGS停止的WebPack这样做..ejs模板以循环文件阵列.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] %>">
<% } %>
希望这能帮助将来的其他人.
这种方法的好处
我需要将JS和CSS分离成实际的单独文件的原因是在WordPress中使用,其中模板没有您继承的"主"模板的概念,而是具有基本页脚和标题包含.
因此,如果你正在使用WordPress,那么这是一个非常好的方法.
由于您希望使用具有不同内容的单独文件,因此您可能希望拆分入口点并过滤块.
在你的两个实例中HtmlWebpackPlugin,你设置的chunks: ['app']包括你的CSS和你的JS.
你可以有类似的东西:
entry: {
'js': [
path.resolve(__dirname, 'src/js/app.js')
],
'css': [
path.resolve(__dirname, 'src/scss/app.scss')
]
},
然后你可以:
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'
})
对于包含在CSS中的CSS <head>,您需要进行设置,inject: false因为您正在使用自己的自定义模板来创建HTML文件.https://github.com/jantimon/html-webpack-plugin#configuration
| 归档时间： |
|
| 查看次数： |
2250 次 |
| 最近记录： |