我是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 回答
尝试使用Copy Webpack Plugin以便在文件夹之间复制文件 .
我不确定你想要复制js文件的原因,webpack的工作方式就像一个树依赖项求解器,所以它应该得到一个入口点(树的)并创建一个包含整个依赖树的bundle .