webpack配置：css/less/js 文件分离打包，img
从零开始学习webpack打包，在网上找了很多资料，最终得到了一个自己比较满意的结果，此项目可以将css文件下的n个css文件，打包到css文件夹下，即打包目录与原目录完全相同，js和图片均如此；css文件自动添加前缀的功能。虽然功能不多比较简单但符合了我的需求，把项目分享出来希望可以帮助到正在学习webpack的你们。
1.webpack版本
webpack版本号为4.30.0，查询版本号方法：进入项目所在文件夹，输入命令 webpack -v 查看当前版本
图1.查看webpack版本
2.webpack所需依赖
所需依赖可在package.json 中查看
图2.package.json文件目录
安装依赖方法为：以安装 style-loader 为例
输入命令：npm install style-loader css-loader --save-dev 即可
3.webpack配置
配置只展示了分离打包后的配置，普通配置不展示，代码如下：
var ExtractTextPlugin = require("extract-text-webpack-plugin");
const FixStyleOnlyEntriesPlugin = require('webpack-fix-style-only-entries');
const entry = require('webpack-glob-entry');
const path = require("path");
const extractCSS = new ExtractTextPlugin({
filename: './[name].css', // 编译后生成的css文件名
disable: false,
allChunks: true
});
const baseConfig = {
module: {
//加载器配置
rules: [
{
test: /\.css$/,
loader:ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader','postcss-loader']
})
},
{
test: /\.less$/,
loader:ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader','less-loader']
})
},
{
test: /\.(png|jpg|svg|jpeg|gif)$/,
loader:'url-loader',
options:{
limit:8,//limit设置成这么小原因为不想使用base64,
name:'../images/[name].[ext]'
}
}
]
},
plugins: [
extractCSS,
new FixStyleOnlyEntriesPlugin()
],
}
module.exports = [
{
// 需要进行打包处理的css入口文件
entry:entry('./app/css/*.css'),
output: {
path: path.resolve(__dirname,'./dist/css')
},
...baseConfig,
},
{
entry:entry('./app/css/*.less'),
output: {
path: path.resolve(__dirname,'./dist/css')
},
...baseConfig,
},
{
entry:entry('./app/js/*.js'),
output: {
path: path.resolve(__dirname,'./dist/js')
},
...baseConfig,
}
];
4.项目说明
此配置可以将css,js文件下的所有文件独立打包，源代码目录如下：
图3.源代码目录
打包代码目录如下：
图4.打包代码目录
项目说明：由于node_modules文件太大，没有上传，需要下载项目后初始化即可
项目地址：https://github.com/brier4942/webpack_demo
参考文章如下（分享了两篇保存的文章，其他参考过的文章已经记不得地址了）：
