首页 文章

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

提问于
浏览
1

我是webpack的新手,并试图学习它 . 我一直在尝试使用webpack将我的供应商js文件和自定义jquery脚本从src复制到dist . 我试过但我找不到任何办法 .

这就是我的文件夹结构:

  • Project_root_folder

  • node_modules /

  • package.json

  • src /

  • app /

  • app.js

  • img /

  • img1.png

  • css /

  • main.scss

  • js /

  • custom_slick.js

  • main.js

  • 插件/

  • jquery.min.js

  • slick.min.js

  • index.pug

  • about.pug

  • contact.pug

  • dist /

  • 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,想要学习它,但我发现它非常困难 .

1 回答

  • 2

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

    我不确定你想要复制js文件的原因,webpack的工作方式就像一个树依赖项求解器,所以它应该得到一个入口点(树的)并创建一个包含整个依赖树的bundle .

相关问题