webpack 打包html 怎么处理css,使用Webpack对CSS文件进行单独打包

一、前言

有的CSS属性需要对不同的浏览器加上前缀，尤其在写CSS3动画代码时，原本只需要5-6行的代码，而针对不同浏览器却要写上10-20行的代码，代码量直接翻了几倍，不仅增加了开发成本，还会打断开发思路，甚至遗漏部分代码。而且现在各大浏览器正在逐步支持不带前缀的CSS3新属性，人工编写这部分代码可能造成代码冗余。可以使用前端自动化打包工具Webpack省去这部分的开发时间。

二、Node.js安装

三、项目配置

目录结构预览：

+ node_modules //npm install自动生成，包含node依赖以及开发依赖

+ app //开发目录(手动创建)

– main.css //目标css文件(手动创建)

– main.js //入口js文件(手动创建)

+ public //代码产出目录(手动创建)

– index.html //单页面项目主页(手动创建)

- bundle.js //打包生成

- main.css //打包生成

– package.json //初始化生成

– package-lock.json //初始化生成

– postcss.config.js //css处理配置(手动创建)

– webpack.config.js //文件打包配置(手动创建)

初始化项目，在命令行工具中执行以下代码：

npm init

// 注意npm版本(npm -v可以查看)，笔者使用的是6.4.0

// 可以使用npm install npm@latest -g更新到最新版本

package.json，代码如下：

{

"name": "csspro",//注意修改项目名称

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

},

"author": "",

"license": "ISC",

"devDependencies": {

"autoprefixer": "^9.1.2", //添加前缀

"css-loader": "^1.0.0", //加载css

"cssnano": "^4.0.5", //css压缩

"file-loader": "^1.1.11", //css图片加载

"postcss-loader": "^3.0.0",

"url-loader": "^1.1.1", //css图片加载

"webpack": "^4.17.0"

},

"dependencies": {

"mini-css-extract-plugin": "^0.4.1"

}

}

在命令行工具执行以下命令

npm install -D webpack-cli

npm install

创建webpack.config.js：

var path = require('path');

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {

entry: __dirname + "/app/main.js", //唯一入口文件

output: {

path: __dirname + "/public", //打包后的文件存放的地方

filename: "bundle.js" //打包后输出文件的文件名

},

module: {

rules: [{

test: /\.css$/,

use: [{

loader: MiniCssExtractPlugin.loader

}, {

loader: "css-loader"

}, {

loader: "postcss-loader"

}]

},

{

test: /\.(png|jpg)$/,

loader: 'url-loader',

options: {

limit: 1,

name: 'images/[name].[ext]',

publicPath: '../'

}

},

]

},

plugins: [

new MiniCssExtractPlugin({

filename: "[name].css",

}),

],

};

创建postcss.config.js：

module.exports = {

plugins: [

require('autoprefixer')({

"browsers": [

"> 1%",

"last 2 versions",

"not ie <= 8",

"ios >= 8",

"android >= 4.0"

]

}),

/*require('cssnano')({

preset: 'default',//css压缩

}),*/

]

}

创建app/main.js，代码如下：

import './main.css';

创建app/main.css，示例代码如下：

.test {

animation: demo 1s;

}

@keyframes demo {

0%, 100% {

transform: translate(10px, 10px, 10px);

}

50% {

transform: translate(0, 0, 0);

}

}

创建public/index.html，引入打包后的js：

Document

在命令行工具中执行打包命令：

webapck

四、打包前后比较

打包前main.css：

.test {

animation: demo 1s;

}

@keyframes demo {

0%, 100% {

transform: translate(10px, 10px, 10px);

}

50% {

transform: translate(0, 0, 0);

}

}

打包后main.css：

.test {

-webkit-animation: demo 1s;

animation: demo 1s;

}

@-webkit-keyframes demo {

0%, 100% {

-webkit-transform: translate(10px, 10px, 10px);

transform: translate(10px, 10px, 10px);

}

50% {

-webkit-transform: translate(0, 0, 0);

transform: translate(0, 0, 0);

}

}

@keyframes demo {

0%, 100% {

-webkit-transform: translate(10px, 10px, 10px);

transform: translate(10px, 10px, 10px);

}

50% {

-webkit-transform: translate(0, 0, 0);

transform: translate(0, 0, 0);

}

}

参考资料