安装
所有css需要在index.js文件中使用require(’./index.css’);require(’./index.less’);
npm install style-loader css-loader -D
详情参考注释----1---- ----2----
解析less文件参考注释----3----
默认会把css写到页面style里，把css抽离成文件用link的方式引入----4----
默认不会为浏览器加上前缀，需要引入----5----
// webpack 是node写出来的 node的写法
let path = require('path');
// console.log(path.resolve('dist'))
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
devServer: { //开发服务器的配置
port: 3000, //端口
progress: true, //打包进度条
contentBase: './dist', //以这个目录作为静态服务
open: true, //打包完成自动打开浏览器
compress: false //启用压缩
},
//----1----把生产模式改成开发模式
mode: 'development', //模式 默认两种 生产： production 开发： development
entry: './src/index.js', //入口
output: {
// 比之前加入了hash，这样每次打包就会生成一个新的文件，不会覆盖
// [hash:8],只展示八位hash值
filename: 'bundle.[hash:8].js', //打包后的文件名称
path: path.resolve(__dirname, 'dist'), //路径必须是一个绝对路径，需要引入node的自带模块
},
plugins: [ //数组 放着所有的webpack插件
new HtmlWebpackPlugin({
template: './src/index.html', //需要放打包文件的html模板路径
filename: 'index.html', //打包完成后的这个模板叫什么名字
minify: { //配置html压缩
removeAttributeQuotes: true, //删除html中的双引号
collapseWhitespace: true, //html文件折叠成一行
},
hash: true, //为html文件添加hash戳
})
],
//----2----新建module模块（开始）
module: { //模块
rules: [ //规则
// CSS-loader 负责解析@import这种语法的
// loader的特点 希望单一
// loader的用法 字符串作用一个loader
// 多个loader需要[]数组
// loader的顺序 默认是从右向左执行，从上到下
// loader还可以写成对象的方式 如下：
{
test: /\.css$/, //正则匹配所有.css文件
use: [
{
loader: 'style-loader', // style-loader 负责把解析好的css 插入到head的标签中
options: { //配置
//insertAt: 'top' //把编辑好的css文件插入head的上头，这样权重就不会大于页面写的css样式?这种方法已经不可用了，如果想解决权重问题，----4----有解决
//可参考webpack介绍：https://webpack.js.org/loaders/style-loader/#string
insert:'head'//默认为head
}
},
'css-loader' //@import语法解析
]
//----2----(结束)
}
]
}
}
----3----安装
less : npm install less less-loader -D
sass : npm install node-sass sass-loader -D
stylus : npm install stylus stylus-loader -D
以less举例：
module: { //模块
rules: [ //规则
// CSS-loader 负责解析@import这种语法的
// style-loader 负责把解析好的css 插入到head的标签中
// loader的特点 希望单一
// loader的用法 字符串作用一个loader
// 多个loader需要[]数组
// loader的顺序 默认是从右向左执行
// loader还可以写成对象的方式 如下：
{
test: /\.css$/, //正则匹配所有.css文件
use: [
// 还可以处理less文件
{
loader: 'style-loader',
options: { //配置
}
},
'css-loader' //@import语法解析
],
},
{
test: /\.less$/, //正则匹配所有.less文件
use: [
// 还可以处理less文件
{
loader: 'style-loader',
options: { //配置
}
},
'css-loader', //@import语法解析
'less-loader' //把less转成css
],
},
----4----安装抽离css插件
npm install mini-css-extract-plugin -D
参考 ----4---- ----4-1---- ----4-2---- ----4-3---- ----4-4----
// webpack 是node写出来的 node的写法
let path = require('path');
// console.log(path.resolve('dist'))
let HtmlWebpackPlugin = require('html-webpack-plugin');
// ----4----引入抽离css插件
let MiniCssExtractPlugin=require('mini-css-extract-plugin');
module.exports = {
devServer: { //开发服务器的配置
port: 3000, //端口
progress: true, //打包进度条
contentBase: './dist', //以这个目录作为静态服务
open: false, //打包完成自动打开浏览器
compress: false //启用压缩
},
mode: 'development', //模式 默认两种 生产： production 开发： development
entry: './src/index.js', //入口
output: {
// 比之前加入了hash，这样每次打包就会生成一个新的文件，不会覆盖
// [hash:8],只展示八位hash值
filename: 'bundle.js', //打包后的文件名称
path: path.resolve(__dirname, 'dist'), //路径必须是一个绝对路径，需要引入node的自带模块
},
// 使用插件
plugins: [ //数组 放着所有的webpack插件
new HtmlWebpackPlugin({
template: './src/index.html', //需要放打包文件的html模板路径
filename: 'index.html', //打包完成后的这个模板叫什么名字
minify: { //配置html压缩
// removeAttributeQuotes: true, //删除html中的双引号
// collapseWhitespace: true, //html文件折叠成一行
},
hash: false, //是否为html文件添加hash戳
}),
// ----4-1----
new MiniCssExtractPlugin({
filename:'min.css', //打包完成后的这个css文件叫什么名字
})
],
module: { //模块
rules: [ //规则
// CSS-loader 负责解析@import这种语法的
// style-loader 负责把解析好的css 插入到head的标签中
// loader的特点 希望单一
// loader的用法 字符串作用一个loader
// 多个loader需要[]数组
// loader的顺序 默认是从右向左执行
// loader还可以写成对象的方式 如下：
{
test: /\.css$/, //正则匹配所有.css文件
use: [
// ----4-2----删除这些文件
// // 还可以处理less文件
// {
// loader: 'style-loader',
// options: { //配置
// insert: 'head' //把编辑好的css文件插入head的上头，这样权重就不会大于页面写的css样式
// }
// },
// ----4-3----添加 意思是把这个模块的样式提取成css文件 下面一样
MiniCssExtractPlugin.loader,
'css-loader' //@import语法解析
],
},
{
test: /\.less$/, //正则匹配所有.less文件
use: [
// ----4-2----删除这些文件
// // 还可以处理less文件
// {
// loader: 'style-loader',
// options: { //配置
// insert: 'head' //把编辑好的css文件插入head的上头，这样权重就不会大于页面写的css样式
// }
// },
// ----4-3----添加 意思是把这个模块的样式提取成css文件
// ----4-4----如果是想打包成多个，就把MiniCssExtractPlugin名字换一个 ，在引入一遍mini-css-extract-plugin插件
MiniCssExtractPlugin.loader,
'css-loader', //@import语法解析
'less-loader' //把less转成css
],
},
]
}
}
打包后的html文件与打包前的html文件对比
.css和.less文件打包后的min.css文件
----5----自动为样式添加浏览器前缀
安装：npm install postcss-loader autoprefixer -D
1.看注释----5----
module: { //模块
rules: [ //规则
// CSS-loader 负责解析@import这种语法的
// style-loader 负责把解析好的css 插入到head的标签中
// loader的特点 希望单一
// loader的用法 字符串作用一个loader
// 多个loader需要[]数组
// loader的顺序 默认是从右向左、从下往上执行
// loader还可以写成对象的方式 如下：
{
test: /\.css$/, //正则匹配所有.css文件
use: [
// ----4-2----删除这些文件
// // 还可以处理less文件
// {
// loader: 'style-loader',
// options: { //配置
// insert: 'head' //把编辑好的css文件插入head的上头，这样权重就不会大于页面写的css样式
// }
// },
// ----4-3----添加 意思是把这个模块的样式提取成css文件 下面一样
MiniCssExtractPlugin.loader,
'css-loader', //@import语法解析
// ----5----
'postcss-loader' //自动为样式添加浏览器前缀 注意位置，需要先处理，放在下面
],
},
{
test: /\.less$/, //正则匹配所有.less文件
use: [
// ----4-2----删除这些文件
// // 还可以处理less文件
// {
// loader: 'style-loader',
// options: { //配置
// insert: 'head' //把编辑好的css文件插入head的上头，这样权重就不会大于页面写的css样式
// }
// },
// ----4-3----添加 意思是把这个模块的样式提取成css文件
// ----4-4----如果是想打包成多个，就把MiniCssExtractPlugin名字换一个 ，在引入一遍mini-css-extract-plugin插件
MiniCssExtractPlugin.loader,
'css-loader', //@import语法解析
'postcss-loader', //自动为样式添加浏览器前缀
'less-loader' //把less转成css
],
},
]
}
2.然后需要新建postcss.config.js文件
代码如下：module.exports={ plugins:[require('autoprefixer')] }
打包即可得前缀
