
原文地址:https://segmentfault.com/a/1190000021518323
作者:Fw恶龙
本文首发于:思否
一、前言
先整理一波之前和webpack相关的文章:
- 使用Webpack对CSS文件进行后处理
- 基于Webpack的CSS Sprites实现方案
- Stylus系列——webpack-spritesmith配合stylus使用示例
继以上第三篇文章后很大程度上提高了CSS的开发效率,但是仍存在以下遗留问题:
- 在开发一个有多页面的项目时,CSS文件部分需要复用,部分需要各自页面引用,之前是直接打包至一个文件,目前需要修改下webpack的路径配置;
- 在CSS中引用的图片可以进行添加版本号、转base64等处理,而HTML中引用的CSS仍需要手动添加版本号,而且img标签的图片无法通过一系列处理;
- 每次开发完毕都需要人工去压缩处理图片,过程繁琐浪费时间;
为了降低和之前文章的耦合度,还有部分更新内容,故重新进行配置,和本文相关的内容会进行注释,其他配置的相关内容可以参考以上文章。
二、项目配置
1. 目录结构预览
+ node_modules // npm install 生成
+ src // 开发目录(自行创建)- index.ejs // 用于生成index.html的模板文件+ css- sprite.styl // webpack-spritesmith生成- index.styl- function.styl // styl个人常用函数+ images- sprite.png // webpack-spritesmith生成+ sprite // 雪碧图放置文件夹..png..png+ js+ index.js
+ dist // 代码产出目录– index.html // html-webpack-plugin生成+ css- index.css+ images- icon.png+ js- index.js+ otherindex.js
– package.json // npm init 生成
– package-lock.json // npm install 生成
- postcss.config.js // 自行创建
– webpack.config.js // 自行创建
2. 初始化项目
npm init
3. package.json
{"name": "cwwebpack","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","start": "webpack --mode development"},"author": "","license": "ISC","devDependencies": {"autoprefixer": "^9.1.2","clean-webpack-plugin": "^1.0.0","css-loader": "^1.0.0","cssnano": "^4.0.5","file-loader": "^1.1.11","html-webpack-plugin": "^3.2.0","image-webpack-loader": "^6.0.0","postcss-loader": "^3.0.0","postcss-sorting": "^4.0.1","stylus": "^0.54.5","url-loader": "^1.1.1","webpack": "^4.17.0","webpack-cli": "^3.1.2","webpack-spritesmith": "^0.5.4"},"dependencies": {"mini-css-extract-plugin": "^0.4.1","stylus-loader": "^3.0.2"},"browserslist": ["> 1%","last 2 versions","not ie <= 8","ios >= 8","android >= 4.0"]
}
4. 安装相关modules
npm install
5. webpack.config.js
var path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const SpritesmithPlugin = require('webpack-spritesmith');
const HtmlWebpackPlugin = require('html-webpack-plugin');var templateFunctionStylSprite = function(data) {var sharedRem = '.ico\n display: inline-block\n background-image: url("I")\n background-size: Dpx Hpx'.replace('I', data.sprites[0].image).replace('D', data.sprites[0].total_width).replace('H', data.sprites[0].total_height);var perSpriteRem = data.sprites.map(function(sprite) {return '.ico-N\n width: Wpx\n height: Hpx\n background-position: Xpx Ypx'.replace('N', sprite.name.replace(/_/g, '-')).replace('W', sprite.width).replace('H', sprite.height).replace('X', sprite.offset_x).replace('Y', sprite.offset_y);}).join('\n');return sharedRem + '\n' + perSpriteRem;
};module.exports = {entry: { // 入口文件,若有多个入口文件可以继续创建,用于解决前言中提到的第一点'index': __dirname + "/src/js/index.js"},output: {path: __dirname + "/dist", //打包后的文件存放的地方filename: "js/other/[name].js" //打包后输出文件的文件名},watch: true, //开启自动编译module: {rules: [{test: /\.styl$/,use: [{loader: MiniCssExtractPlugin.loader,options: {publicPath: "../"}}, {loader: "css-loader"}, {loader: "postcss-loader"}, {loader: "stylus-loader"}]},{test: /\.(png|svg|jp?g|gif)$/,use: [{loader: 'url-loader',options: {limit: 8192,name: 'images/[name].[ext]?v=[hash:8]'}}, {loader: 'image-webpack-loader', // 图片压缩,用于解决前言中提到的第三点options: {mozjpeg: {progressive: true,quality: 90},// optipng.enabled: false will disable optipngoptipng: {enabled: true,},pngquant: {quality: [0.90, 1.00],speed: 4},gifsicle: {interlaced: false,}}}]}]},plugins: [new CleanWebpackPlugin(['dist/css', 'dist/images'],{root: __dirname,verbose: true,dry: true}),new SpritesmithPlugin({src: {cwd: path.resolve(__dirname, 'src/images/sprite'),glob: '*.png'},target: {image: path.resolve(__dirname, 'src/images/sprite.png'),css: [[path.resolve(__dirname, 'src/css/sprite.styl'), {format: 'function_based_template'}]]},customTemplates: {'function_based_template': templateFunctionStylSprite},apiOptions: {cssImageRef: '../images/sprite.png'},spritesmithOptions: {algorithm: 'binary-tree',padding: 2}}),new MiniCssExtractPlugin({filename: "css/[name].css?v=[hash:8]",chunkFilename: "[id].css"}),new HtmlWebpackPlugin({ // 打包html文件,用于解决前言中提到的第二点template:'./src/index.ejs', // 模板文件路径filename: 'index.html', // 生成的文件名title: 'My App', // 页面titlechunks: ['index'], // 需要引入的入口文件,根据entry的入口文件进行配置,会将其生成的css和js插入到模板中inject: false, // 不插入生成的js文件,只是单纯的生成一个html文件,由于个人开发需求,js不需要引入,需要单独开发minify:{ //压缩HTML文件,常用属性如下removeComments: false, // 移除HTML中的注释collapseWhitespace: false, // 删除空白符preserveLineBreaks: false, // 删除换行removeStyleLinkTypeAttributes: true, // type="text/css"从style和link标签中删除removeScriptTypeAttributes: true // type="text/javascript"从script标签中删除}})],
};
6. postcss.config.js
module.exports = {plugins: [require('autoprefixer'),require('cssnano')({preset: 'default',}),require('postcss-sorting')({'properties-order': 'alphabetical'})]
}
7. src/js/index.js
import '../css/index.styl';
8. src/css/index.styl
@import "function.styl"
@import "sprite.styl"
9. src/index.ejs
关于为何使用ejs后缀名,可以参考以下关于html-webpack-plugin属性及其配置的说明。
<!DOCTYPE html>
<html lang="zh-CN"><head><% /* 根据webpack.config.js中的title设置标题 */ %><title><%= htmlWebpackPlugin.options.title %></title><% /* 由于个人需求,不需要插入js,只需要css */ %><% for (var css in htmlWebpackPlugin.files.css) { %><link href="<%=htmlWebpackPlugin.files.css[css] %>" rel="stylesheet"><% } %></head><body><% /* html中使用到的图片需以如下方式插入,才可进行图片的一系列处理 */ %><img src="<%=require('./images/home_bg.jpg')%>" alt="" style="width: 100px;"></body></html>
10. 执行打包命令
npm start
三、html-webpack-plugin属性及其配置
- html处理:Github|html-webpack-plugin
- html压缩:Github|html-minifier
- html-webpack-plugin用法全解(翻译很全)
- html-webpack-plugin详解(有写到在ejs中自定义引用文件的方式)
四、image-webpack-loader属性及其配置
- Github|image-webpack-loader
五、遗留问题
- 关于html压缩html-minifier的配置,提供了可以删除空白和保留换行的配置,但是我想要保留换行的同时保持html文档结构,目前没找到处理方法。(20200408-可以使用html-beautify-webpack-plugin,后续文章会进行讲解)
- 关于图片压缩的参数还没调整到较优的方案。
原文地址:https://segmentfault.com/a/1190000021518323
喜欢 0