到目前為止，我能夠設定 Webpack 來編譯 Sass 和 JavaScript。我分別styles.scss在名為. _index.jsassets/scss/assets/js/amazon
我生成一個styles.css和一個檔案夾index.js。assets/dist/這些都包含在我的 Twig 模板中，帶有amazon.libraries.yml.
有沒有辦法進行實時重新加載？至于現在我的資產在每次更改后都會重新編譯，但我必須手動重新加載瀏覽器。我正在使用 Drupalv8.9.20和 Node.js v16.15.0。
資產/js/index.js：
import "../scss/styles.scss";
console.log("Hello World");
包.json：
{
"name": "amazon",
"scripts": {
"start": "webpack",
"build": "MODE=production webpack"
},
"devDependencies": {
"@babel/core": "^7.14.6",
"@babel/preset-env": "^7.14.7",
"autoprefixer": "^10.4.7",
"babel-loader": "^8.2.2",
"css-loader": "^6.0.0",
"css-minimizer-webpack-plugin": "^3.0.2",
"mini-css-extract-plugin": "^2.1.0",
"postcss-loader": "^6.1.1",
"postcss-preset-env": "^7.6.0",
"sass": "^1.52.1",
"sass-loader": "^12.1.0",
"webpack": "^5.49.0",
"webpack-cli": "^4.9.1"
}
}
webpack.config.js：
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const target = process.env.MODE === "production" ? "browserslist" : "web";
const mode = process.env.MODE === "production" ? "production" : "development";
module.exports = {
entry: "./assets/js/index.js",
output: {
path: path.resolve(__dirname, "assets/dist"),
filename: "index.js",
},
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
url: false,
},
},
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [["postcss-preset-env"]],
},
},
},
{
loader: "sass-loader",
options: {
implementation: require("sass"),
},
},
],
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
},
},
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename: "styles.css",
}),
],
optimization: {
minimizer: ["...", new CssMinimizerPlugin()],
},
target: target,
devtool: mode == "production" ? false : "source-map",
mode: mode,
watch: mode !== "production",
};
.browserslistrc：
defaults
uj5u.com熱心網友回復：
我可以使用BrowserSync設定實時重新加載。我正在localhost:3000用我的 Drupal 開發 url () 代理 BrowserSync url ( amazon.test)。
問題的設定是一個好的開始，更改package.json并webpack.config.js如下所示，運行npm i，然后npm start。
包.json：
{
"name": "amazon",
"scripts": {
"start": "webpack",
"build": "MODE=production webpack"
},
"devDependencies": {
"@babel/core": "^7.14.6",
"@babel/preset-env": "^7.14.7",
"autoprefixer": "^10.4.7",
"babel-loader": "^8.2.2",
"browser-sync": "^2.27.10",
"browser-sync-webpack-plugin": "^2.3.0",
"css-loader": "^6.0.0",
"css-minimizer-webpack-plugin": "^3.0.2",
"mini-css-extract-plugin": "^2.1.0",
"postcss-loader": "^6.1.1",
"postcss-preset-env": "^7.6.0",
"sass": "^1.52.1",
"sass-loader": "^12.1.0",
"webpack": "^5.49.0",
"webpack-cli": "^4.9.1"
}
}
webpack.config.js：
const path = require("path");
const BrowserSyncPlugin = require("browser-sync-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const target = process.env.MODE === "production" ? "browserslist" : "web";
const mode = process.env.MODE === "production" ? "production" : "development";
module.exports = {
mode,
watch: mode !== "production",
entry: "./assets/js/index.js",
output: {
path: path.resolve(__dirname, "assets/dist"),
filename: "index.js",
},
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
url: false,
},
},
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [["postcss-preset-env"]],
},
},
},
{
loader: "sass-loader",
options: {
implementation: require("sass"),
},
},
],
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
},
},
},
],
},
plugins: [
new BrowserSyncPlugin(
// BrowserSync options
{
// browse to http://localhost:3000/ during development
host: "localhost",
port: 3000,
proxy: "amazon.test", // change to your own development url
files: [
{
match: ["**/*.php"],
},
{
match: ["templates/*.twig"],
},
{
match: ["**/*.js"],
},
{
match: ["**/*.scss"],
},
{
match: ["**/*.png"],
},
{
match: ["**/*.jpeg"],
},
{
match: ["**/*.jpg"],
},
{
match: ["**/*.svg"],
},
],
notify: false,
},
// plugin options
{
reload: true,
}
),
new MiniCssExtractPlugin({
filename: "styles.css",
}),
],
optimization: {
minimizer: ["...", new CssMinimizerPlugin()],
},
target: target,
devtool: mode == "production" ? false : "source-map",
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/485978.html
標籤：javascript php 网页包 德鲁巴