Javascript 网页包、多个入口点Sass和JS
下面是我的网页配置。此时,文件加载这个main.js入口点Javascript 网页包、多个入口点Sass和JS,javascript,sass,webpack,entry-point,Javascript,Sass,Webpack,Entry Point,下面是我的网页配置。此时,文件加载这个main.js入口点 import './resources/assets/js/app.js'; import './resources/assets/sass/main.scss'; 我可以在public/js文件中获取这两个文件,但我想在它们自己的文件夹中获取css和js。这可能吗 var webpack = require('webpack'); var path = require('path'); let ExtractTextPlugin =
import './resources/assets/js/app.js';
import './resources/assets/sass/main.scss';
我可以在public/js文件中获取这两个文件,但我想在它们自己的文件夹中获取css和js。这可能吗
var webpack = require('webpack');
var path = require('path');
let ExtractTextPlugin = require("extract-text-webpack-plugin");
var WebpackNotifierPlugin = require('webpack-notifier');
module.exports = {
resolve: {
alias: {
'masonry': 'masonry-layout',
'isotope': 'isotope-layout'
}
},
entry: './main.js',
devtool: 'source-map',
output: {
path: path.resolve(__dirname, './public'),
filename: 'bundle.js'
},
module: {
rules: [
{ test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader?presets[]=es2015",
},
{
test:/\.scss$/,
use: ExtractTextPlugin.extract({
use: [{loader:'css-loader?sourceMap'}, {loader:'sass-loader', options: {
sourceMap: true
}}],
})
},
/*{
test : /\.(png|jpg|svg)$/,
include : path.join(__dirname, '/dist/'),
loader : 'url-loader?limit=30000&name=images/[name].[ext]'
}, */
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
]
},
plugins: [
//new webpack.optimize.UglifyJsPlugin(),
new ExtractTextPlugin('app.css'),
new WebpackNotifierPlugin(),
]
};
我也有类似的需求,不确定这是否是正确的方法,但它对我来说是有效的
output: {
path: path.join(__dirname, './public/js'),
filename:'bundle.js'
},
那么对于css:
plugins: [
new ExtractTextPlugin("../css/[name].css")
],
是的,您可以这样做,下面的示例不要求您在js文件中导入sass文件:
const config = {
entry: {
main: ['./assets/js/main.js', './assets/css/main.scss'],
},
module: {
rules: [
{test: /\.(css|scss)/, use: ExtractTextPlugin.extract(['css-loader', 'sass-loader'])}
// ...
],
},
output: {
path: './assets/bundles/',
filename: "[name].min.js",
},
plugins: [
new ExtractTextPlugin({
filename: '[name].min.css',
}),
// ...
]
// ...
}
最后应该是
/assets/bundles/main.min.js
和/assets/bundles/main.min.css
。显然,您必须添加js规则。我们有多个入口点和输出,并按如下方式定义它们:
entry: {
'js/main.min.js': './resources/assets/js/app.js',
'css/main.min.scss': './resources/assets/sass/main.scss'
},
output: {
filename: path.resolve(__dirname, './public/assets/[name]')
},
webpack读取条目的键,并将它们替换为输出文件名中的
[name]
标记 ExtractTextPlugin
已不推荐用于CSS,建议使用minicsExtractPlugin
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: ['index.js', 'index.css'],
module: {
rules: [{
test: /\.(scss|css)$/,
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
}]
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name]-[hash].css'
})
]
};
您还需要分别安装npm i node sass
。我有一个管理面板(panel.js和panel.scss)和非管理内容页(index.js和main.scss),我想编译成2个css文件和2个js文件
这就是我所做的:
module.exports = {
entry: {
'pages': ['./src/js/index.js', './src/css/main.scss'],
'admin': ['./src/js/admin-index.js', './src/css/admin.scss']
},
output: {
filename: "./js/[name]-bundle.js",
path: path.resolve(__dirname, "dist"),
},
plugins: [
new MiniCssExtractPlugin(
{
filename: "./css/[name].css"
}
),
]
}
结果如下:
dist
css
admin.css
pages.css
js
admin-bundle.js
pages-bundle.js
工作得很好,希望这有帮助迷你css提取插件
可以用webpack 5修复它
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: ['./src/js/index.js', './src/scss/index.scss'],
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
},
module: {
rules: [
{
test: /\.m?js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ['@babel/preset-env']
}
}
}, {
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'sass-loader',
],
},
]
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name]-[hash].css'
}),
]
};
是的,我考虑过,似乎有点错误,必须协商返回树的方式,然后编写文件。谢谢你的回复,如果我发现其他问题,我会保持开放并发布。是的,我知道这是一种黑客行为,但我真的找不到更干净/正确的方式来做哈。我很想看看还有什么其他的解决方案,因为这是我一直想在我的网页项目中改进的东西哈。它是有效的,但它只是一个生成scss
文件扩展名的黑客。main.min.scss
的内容仍然是Javascript。