我们现在打包没有分文件夹，如果想把图片放到img文件夹下，css放到css文件夹 下怎么办呢？也很简单：
图片：
在options里加入outputPath即可：
module: {
rules: [
...
{
test: /\.(png|jpe?g|gif)$/,
use: [
{
test: /\.(png|jpe?g|gif)$/,
use: [
{
loader: 'url-loader',
options: {
//图片大小小于等于limit值，则会以base64形式加载，不会发请求，大于这个值则用file-loader加载
limit: 1*1024,
outputPath: 'img/'
},
},
],
},
...
],
},
css就要在压缩文件的地方配置一下路径：
...
plugins:[ //存放插件
new HtmlWebpackPlugin({
template: './src/index.html', //模板
filename: 'index.html', //默认也是index.html
minify: {
removeAttributeQuotes: true, //删除标签属性的双引号
collapseInlineTagWhitespace: true, //打包成一行
},
hash: true, //增加hash，避免缓存
}),
new CleanWebpackPlugin(), //打包之前先删除原有的
new MiniCssExtractPlugin({
filename: 'style.css', //抽离的文件名
}),
],
...
module: {
rules: [
...
//css-loader 负责解析@import语法处理css style-loader将css插入到head标签中
{ test: /\.css$/, use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../', //这里要注意一下，如果里面有引图片的话需要惊醒配置
}
},
{
loader: 'css-loader',
},
{
loader: 'postcss-loader',
},
]},
...
]
}
...
js也一样，不再赘述了。
如果图片想从服务器上引，publicPath可以配置成服务器地址，比如：
htttp://www.xxx.com/
...
{
test: /\.(png|jpe?g|gif)$/,
use: [
{
test: /\.(png|jpe?g|gif)$/,
use: [
{
loader: 'url-loader',
options: {
//图片大小小于等于limit值，则会以base64形式加载，不会发请求，大于这个值则用file-loader加载
limit: 1*1024,
outputPath: 'img/',
publicPath: 'htttp://www.xxx.com/'
},
},
],
},
...
当然publicPath也可以全局配置，这样就是你引入的文件前全部加入这个服务器地址了
output: {
filename: 'bundle.[hash].js', //默认为main.js [hash]是为了避免js缓存
path: path.resolve(__dirname,'./dist'), //path为绝对路径，用node path模块转化
publicPath:'htttp://www.xxx.com/'
},
