[英]Webpack 2 - How to stop generating .js files for CSS and HTML?
I'm a total newcomer to Webpack (2) so please forgive me for my simple understanding so far. 我是Webpack的新手(2)所以请原谅我迄今为止的简单理解。
Following from a few tutorials around the web, I've cobbled together a working package.json
and webpack.babel.config.js
file. 根据网上的一些教程,我拼凑了一个工作的
package.json
和webpack.babel.config.js
文件。
Essentially, I am trying to turn SCSS into CSS, Pug into HTML and JS into Babel'd JS. 从本质上讲,我试图将SCSS转换为CSS,将Pug转换为HTML,将JS转换为Babel'd JS。
When I run my dist
command, it produces the files, but also along with it, are .js files for each .scss and .html etc. Hopefully the image below can illustrate this: 当我运行我的
dist
命令时,它会生成文件,但也随之生成每个.scss和.html等的.js文件。希望下面的图片可以说明这一点:
Ideally what I'm after is simply, app.css
, index.html
and app.js
. 理想的情况是什么,我以后是根本,
app.css
, index.html
和app.js
。
webpack.babel.config.js webpack.babel.config.js
import webpack from 'webpack';
import path from 'path';
import autoprefixer from 'autoprefixer';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import HtmlWebpackPlugin from 'html-webpack-plugin';
const extractHtml = new ExtractTextPlugin({
filename: '[name].html'
});
const extractPug = new ExtractTextPlugin({
filename: '[name].[contenthash].pug'
});
const extractScss = new ExtractTextPlugin({
filename: '[name].[contenthash].css',
allChunks: true
});
let config = {
stats: {
assets: false,
colors: true,
version: false,
hash: true,
timings: true,
chunks: false,
chunkModules: false
},
entry: {
'dist/html/app': [
path.resolve(__dirname, 'src/pug/app.pug')
],
'dist/js/app': [
path.resolve(__dirname, 'src/js/app.js')
],
'dist/css/app': [
path.resolve(__dirname, 'src/scss/app.scss')
]
},
output: {
path: path.resolve(__dirname, './'),
filename: '[name].js'
},
module: {
rules: [
{
test: /\.pug$/,
use: extractHtml.extract({
use: ['html-loader','pug-html-loader?pretty=false&exports=false']
})
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: ['babel-loader']
},
{
test: /\.scss$/,
use: extractScss.extract({
use: ['css-loader', 'postcss-loader', 'sass-loader']
})
}
]
},
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: false,
stats: 'errors-only',
open: false
},
plugins: [
new HtmlWebpackPlugin({
title: 'Portfolio',
// minify: {
// collapseWhitespace: true
// },
hash: true,
template: './dist/html/app.html',
filename: 'index.html'
}),
new webpack.LoaderOptionsPlugin({
minimize: false,
debug: true,
options: {
babelLoader: {
presets: [
['es2015']
]
},
postcss: [
autoprefixer({
browsers: ['last 2 versions', 'Explorer >= 9', 'Android >= 4']
})
],
sassLoader: {
includePaths: [
path.resolve(__dirname, 'node_modules/sanitize.css/')
]
}
}
}),
extractScss,
extractHtml,
extractPug
]
}
export default config;
package.json 的package.json
{
"name": "portfolio",
"version": "1.0.0",
"description": "Portfolio of Michael Pumo",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server",
"prod": "webpack -p",
"dist": "webpack --config webpack.config.babel.js"
},
"author": "Michael Pumo",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^6.7.7",
"babel-core": "^6.24.0",
"babel-loader": "^6.4.1",
"babel-preset-es2015": "^6.24.0",
"css-loader": "^0.27.3",
"extract-text-webpack-plugin": "^2.1.0",
"html-loader": "^0.4.5",
"html-webpack-plugin": "^2.28.0",
"html-webpack-pug-plugin": "^0.0.3",
"node-sass": "^4.5.0",
"postcss-loader": "^1.3.3",
"pug": "^2.0.0-beta11",
"pug-html-loader": "1.1.1",
"sass-loader": "^6.0.3",
"style-loader": "^0.14.1",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.2"
}
}
I have many other issues I'd like to resolve too but I'm taking it one issue at a time. 我还有很多其他问题需要解决,但我一次只能解决一个问题。 Thanks for your help.
谢谢你的帮助。
You don't want to use multiple entries, but instead add it to a single entry. 您不想使用多个条目,而是将其添加到单个条目中。 For it to work nicely with the
extract-text-webpack-plugin
you should also change the output
a little. 为了使它与
extract-text-webpack-plugin
您还应该稍微更改output
。 It makes it much easier when you set output.path
to the dist/
directory, which also makes more sense conceptually. 将
output.path
设置为dist/
目录时会更容易,这在概念上也更有意义。 You'll have one entry point for app
and then you set the output for the different file types to the corresponding directories. 您将有一个
app
入口点,然后将不同文件类型的输出设置为相应的目录。 For JavaScript that's the output.filename
option, which you want in js/
. 对于JavaScript,它是你想要在
js/
的output.filename
选项。 Your entry and output should look likes this: 您的输入和输出应该看起来像这样:
entry: {
app: [
path.resolve(__dirname, 'src/pug/app.pug'),
path.resolve(__dirname, 'src/js/app.js'),
path.resolve(__dirname, 'src/scss/app.scss')
]
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name].js'
},
And you do the same thing as with output.filename
for the filename in the extract text plugins: 并且您对提取文本插件中的文件名的
output.filename
执行相同的操作:
const extractHtml = new ExtractTextPlugin({
filename: 'html/[name].html'
});
const extractScss = new ExtractTextPlugin({
filename: 'css/[name].[contenthash].css',
allChunks: true
});
You didn't use extractPug
at all, so I left it off and you probably want to remove it. 你根本没有使用
extractPug
,所以我把它关了,你可能想要删除它。
The output will look likes this: 输出看起来像这样:
dist
├─ css
│ └─ app.50352154102b272d39e16c28ef00c1ac.css
├─ html
│ └─ app.html
├─ js
│ └─ app.js
└─ index.html
Now you also have index.html
in the dist
directory and you can simply deploy the dist
directory, as it's self-contained. 现在你在
dist
目录中也有index.html
,你可以简单地部署dist
目录,因为它是自包含的。
On a side note: You should not use ./dist/html/app.html
as a template to html-webpack-plugin
but instead use the .pug
file directly with the pug-loader
, which means that you don't even need to add it to the entry or extract the HTML. 旁注:您不应该使用
./dist/html/app.html
作为html-webpack-plugin
的模板,而是直接使用.pug
文件和.pug
pug-loader
,这意味着您甚至不需要将其添加到条目或提取HTML。
From what I understand, there is one output for each of your entry points ( this seems to suggest that way). 根据我的理解,每个入口点都有一个输出( 这似乎表明了这一点)。 I believe the most common use case is that there is only one entry point (usually app.js or index.js), and all the required files (like css and other js files) are "
require
d" in the app.js (or import if you are using ES6). 我相信最常见的用例是只有一个入口点(通常是app.js或index.js),所有必需的文件(如css和其他js文件)在app.js中都是“
require
d”(或者如果您使用ES6则导入)。 That way, there is just one output js file. 这样,只有一个输出js文件。 Also, you can define where to store the individual output files for each loader in the loader's query.
此外,您还可以在加载程序的查询中定义每个加载器的各个输出文件的存储位置。
For example, this is a part of my webpack config file: 例如,这是我的webpack配置文件的一部分:
module: {
loaders: [
{test: /\.css$/, loader: 'style-loader!css-loader' },
{test: /\.js$/, exclude: /node_modules/, loaders: ['babel-loader']},
{test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, loader: 'file-loader', query: {name: 'fonts/[name].[ext]'}},
{test: /\.(jpg|png)$/, loader: 'file-loader', query: {name: 'img/[name].[ext]'}},
{test: /\.ico$/, loader: 'file-loader?name=[name].[ext]'}
]
}
The query
parameter on each loader is specifying the output directory and filename for each of the loaders. 每个加载器上的
query
参数指定每个加载器的输出目录和文件名。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.