new HTMLWebpackPlugin({
template: './react/src/app/index.html'
})
rules: [
{
test: /\.[jt]+sx?$/,
use: "ts-loader",
exclude: /node_modules/,
},
}
webpack.mix.js
это надстройка над webpack.config.js
.php artisan serve --port=3001
const mix = require("laravel-mix");
const webpack = require("webpack");
mix
.browserSync({
host: "0.0.0.0",
port: "3000",
proxy: "http://127.0.0.1:3001",
logConnections: false,
notify: false
})
.js("resources/js/app.js", "public/js")
.disableSuccessNotifications()
.sass("resources/sass/app.scss", "public/css")
.webpackConfig({
plugins: [
new webpack.ProvidePlugin({
$: "jquery"
})
]
});
webpackConfig
, в который ты можешь добавить все, что касается вебпака.extract css plugin
, его свежая инкарнация - https://webpack.js.org/plugins/mini-css-extract-plugin/// webpack.config.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
{
mode: "development",
devtool: "cheap-module-source-map",
entry: {
main: path.join(__dirname, "./assets/src/ts/main.ts"),
},
output: {
path: path.resolve(__dirname, "./assets/"),
filename: "js/[name].js",
},
resolve: {
extensions: ["*", ".js", ".ts", ".tsx"],
},
optimization: {
},
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// all options are optional
filename: "css/[name].css",
chunkFilename: "css/[id].css",
ignoreOrder: false, // Enable to remove warnings about conflicting order
stats: { children: false },
}),
],
module: {
rules: []
}
};
fromTo
используется где-то еще в импортированных функциях. Если есть какая-то зависимость в твоем коде, или в импортируемом, то функция будет включена. Иначе же все сломается.fromTo
его часть. webpack.ProvidePlugin
, пример ниже.module.exports = {
entry: path.resolve(__dirname, 'src/js/main.js'),
output: {
path: outputDir,
filename: 'bundle.js'
},
module: {
rules: [{
test: require.resolve('jquery'),
use: [{
loader: 'expose-loader',
options: '$'
}]
}]
},
plugins: [
new webpack.ProvidePlugin( {
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
} )
]
};
npm i @fancyapps/fancybox
import "@fancyapps/fancybox";