webpack打包提取css到独立文件

生产环境：能让代码优化上线运行的环境

提问：css打包在js文件中会出现什么情况?

答：css在js中,这样js文件体积变得非常大，下载就会非常慢,因为是先加载js，先执行js代码,然后创建style标签加载在页面中，那么页面就会出现闪屏现象，所以需要将css文件内容从js中提取出来。

webpack打包需要做哪些优化:

1.将css抽离出来

2.统一对代码进行压缩

3.部分样式问题和js存在兼容性问题

提取css到独立文件做的好处

1.能够让代码更快的运行,性能更好

2.能够让代码在各个浏览器中平稳的运行，不出现问题

注意命令 webpack  和 npx webpack-dev-server的区别

  webpack：用于打包

  npx webpack-dev-server：用于编译打包，没有输出

提取

重点内容:

需要安装包：npm i mini-css-extract-plugin

在module的rules部分，对css的处理，需要去掉style-loader 变为 MiniCssExtractPlugin.loader

可以通过 new MiniCssExtractPlugin({ filename:'css/built.css' }) 进行重命名，默认是 main.css文件

1. "css-loader": "^5.2.4",
   
2.     "file-loader": "^6.2.0",
   
3.     "html-webpack-plugin": "^5.3.1",
   
4.     "mini-css-extract-plugin": "^1.5.0",
   
5.     "style-loader": "^2.0.0",
   
6.     "url-loader": "^4.1.1"

复制代码

1. const {resolve} = require('path')
   
2. const HtmlWebpackPlugin  = require('html-webpack-plugin')
   
3. const MiniCssExtractPlugin = require('mini-css-extract-plugin')
   
4. module.exports = {
   
5.   entry:'./src/js/index.js',
   
6.   output:{
   
7.     filename:'js/built.js',
   
8.     path:resolve(__dirname,'build')
   
9.   },
   
10.   module:{
    
11.     rules:[
    
12.       {
    
13.         test:/\.css$/,
    
14.         use:[
    
15.           //创建style标签,将样式放入
    
16.           // 'style-loader',
    
17.           //这个loader取代style-loader.作用:提取css成单独文件
    
18.           MiniCssExtractPlugin.loader,
    
19.           //将css文件整合到js文件中
    
20.           'css-loader']
    
21.       }
    
22.     ]
    
23.   },
    
24.   plugins:[
    
25.     new HtmlWebpackPlugin({
    
26.       template:'./src/index.html'  //将复制该文件打包到新的文件中
    
27.     }),
    
28.     new MiniCssExtractPlugin({
    
29.       //对输出文件进行重命名
    
30.       filename: 'css/built.css'
    
31.     })
    
32.   ],
    
33.   mode:'development'
    
34. }

复制代码

兼容

注意点：

   需要和 webpack.config.js 同级添加一个 postcss.config.js 文件，因为以前的写法不支持了(看下面内容)

   同时用得到了 postcss-loader 和 postcss-preset-env 插件

   需要在package.json中配置css的兼容处理browserslist

1. {
   
2.   "name": "09tiqucss",
   
3.   "version": "1.0.0",
   
4.   "description": "",
   
5.   "main": "webpack.config.js",
   
6.   "scripts": {
   
7.     "test": "echo "Error: no test specified" && exit 1"
   
8.   },
   
9.   "keywords": [],
   
10.   "author": "",
    
11.   "license": "ISC",
    
12.   "dependencies": {
    
13.     "css-loader": "^5.2.4",
    
14.     "file-loader": "^6.2.0",
    
15.     "html-webpack-plugin": "^5.3.1",
    
16.     "mini-css-extract-plugin": "^1.5.0",
    
17.     "postcss-loader": "^5.2.0",
    
18.     "postcss-preset-env": "^6.7.0",
    
19.     "style-loader": "^2.0.0",
    
20.     "url-loader": "^4.1.1"
    
21.   },
    
22.   "browserslist": {
    
23.     "development": [
    
24.       "last 1 chrome version",
    
25.       "last 1 firefox version",
    
26.       "last 1 safari version"
    
27.     ],
    
28.     "production": [
    
29.       ">0.2%",
    
30.       "not dead",
    
31.       "not op_mini all"
    
32.     ]
    
33.   }
    
34. }

复制代码

1. const {resolve} = require('path')
   
2. const HtmlWebpackPlugin  = require('html-webpack-plugin')
   
3. const MiniCssExtractPlugin = require('mini-css-extract-plugin')
   
4. 
   
5. //设置node环境变量,这一句不写就是默认生产环境
   
6. process.env.NODE_ENV = 'development'
   
7. 
   
8. module.exports = {
   
9.   entry:'./src/js/index.js',
   
10.   output:{
    
11.     filename:'js/built.js',
    
12.     path:resolve(__dirname,'build')
    
13.   },
    
14.   module:{
    
15.     rules:[
    
16.       {
    
17.         test:/\.css$/,
    
18.         use:[
    
19.           //创建style标签,将样式放入
    
20.           // 'style-loader',
    
21.           //这个loader取代style-loader.作用:提取css成单独文件
    
22.           MiniCssExtractPlugin.loader,
    
23.           //将css文件整合到js文件中
    
24.           'css-loader',
    
25.           /*
    
26.           css兼容性处理: postcss --> postcss-loader  postcss-preset-env(插件)
    
27.           这个插件帮postcss找到package.json中browserslist里面的配置,通过配置加载指定的css兼容性样式
    
28.           "browserslist":{
    
29.             //开发环境 -->设置node环境变量:process.env.NODE_ENV = development
    
30.             "development":[
    
31.               "last 1 chrome version", //最近的chrome浏览器
    
32.               "last 1 firefox version",//最近的firefox浏览器W
    
33.               "last 1 safari version" //最近的safari浏览器
    
34.             ],
    
35.             //生产环境:默认是看生产环境的,与下面的 mode:development 无关
    
36.             "production":[
    
37.               ">0.2%",   //表示所有的浏览器了
    
38.               "not dead", //不要死了的浏览器 ie10
    
39.               "not op_mini all" //不要欧鹏的浏览器
    
40. 
    
41.             ]
    
42.           }
    
43.           */
    
44.           /*
    
45.           使用loader的默认配置
    
46.           'postcss-loader'
    
47.           修改loader的配置(如下)
    
48.           */
    
49.           {
    
50.             loader:'postcss-loader',
    
51.           /*  
    
52.            //不支持这种写法,而是抽离成postcss.config.js文件,抽离的文件是不需要任何引入的
    
53.             options:{
    
54.               ident:'postcss',
    
55.               plugins: () => [
    
56.                 require('postcss-preset-env')()
    
57.               ]
    
58.             } */
    
59.           }
    
60.         ]
    
61.       }
    
62.     ]
    
63.   },
    
64.   plugins:[
    
65.     new HtmlWebpackPlugin({
    
66.       template:'./src/index.html'  //将复制该文件打包到新的文件中
    
67.     }),
    
68.     new MiniCssExtractPlugin({
    
69.       //对输出文件进行重命名
    
70.       filename: 'css/built.css'
    
71.     })
    
72.   ],
    
73.   mode:'development'
    
74. }

复制代码