從零開始學習webpack打包，在網上找了很多資料映胁，最終得到了一個自己比較滿意的結果木羹，此項目可以將css文件下的n個css文件，打包到css文件夾下解孙，即打包目錄與原目錄完全相同坑填，js和圖片均如此；css文件自動添加前綴的功能弛姜。雖然功能不多比較簡單但符合了我的需求脐瑰，把項目分享出來希望可以幫助到正在學習webpack的你們。
1.webpack版本
webpack版本號為4.30.0廷臼，查詢版本號方法：進入項目所在文件夾苍在，輸入命令 webpack -v 查看當前版本
2.webpack所需依賴
所需依賴可在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文件下的所有文件獨立打包寂恬，源代碼目錄如下：
打包代碼目錄如下：
項目說明：由于node_modules文件太大，沒有上傳莱没，需要下載項目后初始化即可
項目地址：https://github.com/brier4942/webpack_demo
參考文章如下（分享了兩篇保存的文章初肉，其他參考過的文章已經記不得地址了）：
