4- webpack 解析css模块 css-loader style-loader

目录结构

注意不能直接在index.html 中引入index.css 因为index.html 会当做模板 输出到dist文件夹下 并不会将index.css输出到外面 要在index.js中通过require方式引入，当执行npm run dev 会报错说不认识 这个css模块，那么我们就要安装解析css的模块了 index.js文件

require('./index.css')

css-loader 解析css模块

npm install css-loader 在webpack.config.js 中的module配置 css-loader辅助解析@import这种用法，所以在css文件中可以导入其他css文件

index.css文件

@import "./a.css"; body{ background: red; transform: rotate(45deg); }

style-loader 将css插入到页面中

只安装css-loader是不可以的 因为css-loader虽然可以解析css模块 但是并不会将css插入到html页面中(header标签中) 所以还要安装 style-loader

webpack.config.js 文件

module:{ //模块 rules:[ //匹配规则 //匹配以css结尾的文件 loader执行顺序 从右向左 从下向上 // {test:/\.css$/,use:['style-loader','css-loader']}, //另一种写法 对象形式 可以传参数 {test:/\.css$/,use:[ { loader:'style-loader', options:{ insert:'top' //将style标签插入到最上面 避免影响直接在index.html中写的样式 //(insert名字有可能不一样 影响整体效果 ) } }, 'css-loader' ]}, ] }

处理其他不同样式文件时如less sass等 要安装对应的loader

mini-css-extract-plugin 抽离css插件

经过上面的所有配置应该就可以正常引入css模块了 ，但是打包后发现css全部在 index.html的style标签里 ，这样并不好 应该讲css样式通过link标签引入到index.html 页面里。所以就用到了抽离css样式的插件，npm install mini-css-extract-plugin

let miniCssExtractPlugin=require('mini-css-extract-plugin')//抽离css样式插件 module.exports={ plugins:[ new miniCssExtractPlugin({ filename:'main.css' //抽离出css文件的名字 }) ], module:{ rules:[ //使用css抽离插件时 style-loader可以替换为 miniCssExtractPlugin.loader, {test:/\.css$/,use:[ miniCssExtractPlugin.loader,'css-loader']}, ] } }

autoprefixer 自动加前缀

有的时候某些css3属性可能有的浏览器不支持 需要添加浏览器前缀， 那么可以安装npm install postcss-loader autoprefixer 自动加前缀 安装好之后在css-loader之前放置即可 postcss-loader ,然后启动服务 会报错No PostCSS Config found in…说明使用这个插件必须要新建一个配置文件 告诉它启动时使用autoprefixer插件。新建postcss.config.js

module:{ rules:[ {test:/\.css$/,use:[ miniCssExtractPlugin.loader,'css-loader','postcss-loader']}, ] }

optimize-css-assets-webpack-plugin 优化压缩css

let optimizeCss=require('optimize-css-assets-webpack-plugin')//压缩css module.exports={ plugins:[ new optimizeCss(), ], }

uglifyjs-webpack-plugin mode为development时压缩js文件

mode:‘development’, 开发模式 不压缩js文件 mode:‘production’, 生产模式 压缩js文件

但是当mode:'development’市如何压缩js文件？ 用uglifyjs-webpack-plugin

let uglifyjsWebpackPlugin=require('uglifyjs-webpack-plugin') plugins:[ new uglifyjsWebpackPlugin(), ],

使用之后会发先即使mode为development，但是打包之后的js还是压缩的