![](/img/trans.png)
[英]How to inject Webpack DefinePlugin variables in non Module Scripts
[英]How to include and use DefinePlugin in webpack config?
嗨,我正在嘗試使用定義插件,因此我可以更新版本號以確保我的 JS 在發布新版本后刷新。 不過,我似乎無法讓 DefinePlugin 正常工作。 我在文件夾 webpack 中看到它,我正在嘗試按照文檔進行操作,但是我收到找不到它的錯誤。 這是我的配置:
const path = require('path'),
settings = require('./settings');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const webpack = require('webpack');
module.exports = {
entry: {
'scrollerbundled': [settings.themeLocation + "js/scroller.js"],
'mapbundled': [settings.themeLocation + "js/shopmap.js"],
'sculptor': [settings.themeLocation + "js/sculptor.js"]
},
output: {
path: path.resolve(__dirname, settings.themeLocation + "js-dist"),
filename: "[name].js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
],
plugins: [new webpack.DefinePlugin({
PRODUCTION: JSON.stringify(true),
VERSION: JSON.stringify('5fa3b9'),
})]
},
optimization: {
minimizer: [new UglifyJsPlugin({
uglifyOptions: {
mangle: true,
output: {
comments: false
}
}
})]
},
mode: 'production'
}
我有 "webpack": "^4.28.4" 並在 webpack 配置中定義
new webpack.DefinePlugin({
PRODUCTION: JSON.stringify(true),
});
如果你安慰那個變量,你就找不到它。 我有條件地使用
if (PRODUCTION) {
//do stuff
}
另一種情況是在對象中設置全局變量並與 webpack 共享。
這是一個例子
new webpack.ProvidePlugin({
CONFIG: path.resolve(__dirname, './CONSTS.js')
}),
// the path is src/CONST.JS
在 eslintrc 文件中,您可以添加該變量以避免導入錯誤。
"settings": {
"import/resolver": {
"webpack": {
"config": "webpack.dev.js"
}
}
}
然后在任何文件中,您都可以使用 import {value} from 'CONFIG'
{
"parser": "babel-eslint",
"extends": [
"airbnb",
"plugin:react/recommended",
"prettier",
"prettier/react"
],
"plugins": ["react", "import", "prettier"],
"env": {
"browser": true
},
"settings": {
"import/resolver": {
"webpack": {
"config": "webpack.dev.js"
}
}
}
}
那是我的 eslintrc。 這是為了使用在 webpack 配置中使用模塊別名創建的絕對導入。 你需要安裝eslint-import-resolver-webpack
如果你使用 laravel mix,你可以將new webpack.DefinePlugin
代碼放入.webpackConfig
塊的plugins
數組中:
webpack.mix.js:
mix
.webpackConfig({
devtool: 'source-map',
resolve: {
alias: {
'sass': path.resolve('resources/sass'),
}
},
plugins: [
new webpack.ProvidePlugin({
'window.Quill': 'quill', // <--------------------- this right here
__VERSION__: JSON.stringify('12345')
})
]
})
.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.copy([
'resources/fonts/*',
], 'public/fonts');
通過推斷,這意味着您還可以將此代碼添加到常規(非 laravel 混合)webpack 配置中的類似塊中。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.