1. 安装插件 CopyWebpackPlugin
将单个文件或整个目录复制到输出目录(outpath);
npm安装插件:
npm install copy-webpack-plugin -D
需要输出的文件夹为:存放静态资源图片的images文件夹:
2. 在webpack配置文件中配置,将images文件输出到outpath路径中
我的webpack所有配置文件代码:
const path = require('path');
const webapck = require("webpack");
const CopyWebpackPlugin = require('copy-webpack-plugin');
let config = {
mode: 'none',
entry: {
DrawAndMeasureHelper: path.join(__dirname, './app.js')
},
output: {
filename: '[name].bundle.js',
path: path.join(__dirname, './dist')
},
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.js$/,
exclude: /node_module/,
loader: 'babel-loader'
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
use: [{
loader: 'file-loader',
options: {
name: '[hash:3]_[name].[ext]', // 打包后的文件名称
outputPath: '',
publicPath: '../img/',
useRelativePath: true
}
}]
},
{
test: /\.(otf|eot|svg|ttf|woff|woff2)$/,
use: [{
loader: 'url-loader',
options: {
name: '[name].[ext]', // 打包后的文件名称
outputPath: '', // 默认是dist目录
publicPath: '../font/', // 图片的url前面追加'../font'
useRelativePath: true, // 使用相对路径
limit: 50000 // 表示小于1K的图片会被转化成base64格式
}
}]
}
]
},
resolve: {
alias: {
jquery: path.resolve(__dirname, "lib/jquery/jquery.min.js"),
turf: path.resolve(__dirname, "lib/turf/turf.min.js"),
layer: path.resolve(__dirname, "lib/layui/layui.all.js"),
"layer.css":path.resolve(__dirname, "lib/layui/css/layui.css")
}
},
plugins: [
new webapck.ProvidePlugin({
$: 'jquery',
jquery: 'jquery',
turf: 'turf'
}),
//-------------------------------复制文件夹到dist目录下---------------
new CopyWebpackPlugin([
{from: path.join(__dirname, 'images'),to: path.join(__dirname, 'dist/images')}
])
]
}
module.exports = config