使用Webpack 3的此配置似乎不会在public/css
中输出任何CSS:
import path from 'path';
import CleanWebpackPlugin from 'clean-webpack-plugin';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
const ep = new ExtractTextPlugin({filename: ["./public/css/app.css"]});
export default {
context: path.resolve(__dirname, 'resources', 'assets', 'js'),
entry: './app.js',
output: {
filename: 'app.js',
path: path.resolve(__dirname, 'public', 'js')
},
module: {
rules: [
{
test: /\.js$/,
include: /resources\/assets\/js/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ['env']
}
}
},
{
test: /app.scss$/,
include: [path.resolve(__dirname, 'resources', 'assets', 'sass')],
exclude: [path.resolve(__dirname, "node_modules")],
use: ep.extract({
use: [
{
loader: 'sass-loader',
options: {
includePaths: [
path.resolve(__dirname, 'node_modules', 'foundation-sites', 'scss')
],
sourceMap: false
}
}
],
fallback: "style-loader"
})
}
]
},
plugins: [
new CleanWebpackPlugin([
path.resolve(__dirname, 'public', 'js'),
path.resolve(__dirname, 'public', 'css')
]),
ep
]
};
packages.json
:
{
"private": true,
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"babel-register": "^6.26.0",
"clean-webpack-plugin": "^0.1.17",
"extract-text-webpack-plugin": "^3.0.2",
"gulp": "^3.9.1",
"laravel-elixir-browserify-official": "^0.1.3",
"node-sass": "^4.7.2",
"sass-loader": "^6.0.6",
"webpack": "^3.10.0"
},
"dependencies": {
"@fortawesome/fontawesome": "^1.1.2",
"@fortawesome/fontawesome-free-brands": "^5.0.4",
"@fortawesome/fontawesome-pro-light": "^5.0.4",
"@fortawesome/fontawesome-pro-regular": "^5.0.4",
"fontfaceobserver": "^2.0.9",
"foundation-sites": "^6.4.3",
"jquery": "^3.3.0",
"jquery-recliner": "^0.2.5",
"laravel-elixir": "^6.0.0-15"
},
"scripts": {
"build": "./node_modules/.bin/webpack",
"build:prod": "./node_modules/.bin/webpack -p",
"watch": "./node_modules/.bin/webpack --watch"
}
}