gpt4 book ai didi

javascript - 如何使用 webpack 将脚本文件从 src 复制到 dist

转载 作者:行者123 更新时间:2023-11-30 09:31:03 25 4
gpt4 key购买 nike

我是 webpack 的新手,正在尝试学习它。我一直在尝试使用 webpack 将我的 vendor js 文件和自定义 jquery 脚本从 src 复制到 dist。我试过了,但找不到任何方法。

我的文件夹结构是这样的:

  • 项目根文件夹

    • 节点模块/
    • package.json
    • 来源/
    • 应用/
      • 应用程序.js
    • 图片/
      • img1.png
    • CSS/
      • main.scss
    • js/

      • custom_slick.js
      • main.js
      • 插件/
      • jquery.min.js
      • slick.min.js
    • index.pug

    • about.pug
    • contact.pug

    • 距离/

    • webpack.config.js

我的 webpack.config 文件

        var path = require("path"),
src = path.resolve(__dirname, "src"),
dist = path.resolve(__dirname, "dist"),
webpack = require("webpack"),
HtmlWebpackPlugin = require("html-webpack-plugin"),
HtmlWebpackPugPlugin = require('html-webpack-pug-plugin'),
ExtractTextPlugin = require("extract-text-webpack-plugin"),

extractPlugin = new ExtractTextPlugin({
filename: "css/main.css"
});

module.exports = {
entry: src + "/app/app.js",
output: {
path: dist,
filename: "bundle.js",
publicPath: "/"
},
module: {
rules: [
{ //Convert .pug to .html
test: /\.pug$/,
loaders: ['file-loader?name=[name].html', 'pug-html-loader?pretty&exports=false']
},
{
test: /\.scss$/, //convert .scss to .css
use: extractPlugin.extract({
use: ["css-loader", "sass-loader?minimize=true"]
})
},
{
test: /..\js\$\.js$/, // move all .js files in js folder
use: [
{
loader: "file-loader",
options: {
name: "[name].js",
outputPath: "js/"
}
}
]
},
{
test: /..\js\plugins\.js$/,
use: [
{
loader: "file-loader",
options: {
name: "js/plugins/[name].js",
outputPath: "js/plugins/"
}
}
]
}
]
},
plugins: [
extractPlugin
]
}

App.js 文件

import '../css/main.scss';

require.context('../js/', true, /\.js$/); //require all js files in js folder
require.context('../js/plugins/', true, /\.js$/); // all js files in plugins folder which is inside js folder

function requirAll (r) { r.keys().forEach(r); }
requireAll(require.context('../', true, /\.pug$/));

此外,当我运行这个配置文件时,我注意到只有后缀为“-js”的脚本文件被复制,而没有复制 js/文件夹中包含的任何其他 js 文件,例如文件名“main.js”没有被复制已复制,但如果它被命名为“main-js.js”,那么它会被复制到我的 dist 文件夹中,我无法从 plugins/文件夹中复制文件。我无法理解这一点。

我已经尝试了在 Stack Overflow、GitHub 和类似网站上遇到的所有可能的解决方案,但没有一个有用。我还发现 webpack 非常困惑。在转向 webpack 之前,我一直在使用 Gulp,我发现它更有帮助。我遇到了 webpack 并想学习它,但我发现它非常困难。

最佳答案

尝试使用Copy Webpack Plugin以便在文件夹之间复制文件。

我不确定您要复制 js 文件的原因,webpack 的工作方式类似于树依赖项求解器,因此它应该获取(树的)入口点并创建一个包含整个依赖项树的包。

关于javascript - 如何使用 webpack 将脚本文件从 src 复制到 dist,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46262608/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com