webpack学习笔记——————样式处理

最新推荐文章于 2023-10-09 18:57:07 发布

B21C

最新推荐文章于 2023-10-09 18:57:07 发布

阅读量167

点赞数

分类专栏： webpack webpack 4.0 文章标签： webpack

本文链接：https://blog.csdn.net/qq_39040042/article/details/88039806

版权

webpack 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

webpack 4.0

4 篇文章 0 订阅

订阅专栏

写这篇文章之前，先看一下我目前的webpack配置：

let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
	devServer: {//开发服务器配置
		port: 3000,
		progress: true,
		contentBase: './build',
		open: true
	},
	mode: 'production',
	entry: './src/index.js',//入口
	output: {
		filename: "bundle.[hash:8].js",//打包后的文件名
		path: path.resolve(__dirname, 'build')  //路劲必须是一个绝对路劲,_dirname指当前目录下的dist目录
	},
	plugins: [
		new HtmlWebpackPlugin({
			template: './src/index.html',
			filename: 'index.html',
			minify: {
				removeAttributeQuotes: true,
				collapseWhitespace: true
			},
			hash:true
		})
	]
}

目前只配置了服务器，入后，出口以及一个html插件，接来配置样式：
现在现在src目录下新建一个样式文件：index.css

body{background:red}

我们在js中引入

require('./index.css')

为什么不在html中引入呢？因为我们会将html作为模板原封不动的打包到build目录，

在webpack的配置文件的moudle.exports中加入如下配置：

module: {
			rules: [
			{
				test: /\.css$/, //正则匹配css文件
				 use: [ loader: 'style-loader', 'css-loader']
			}
		]
	}

注意：

css-loader 接续@import这种语法
style-loader 把css放入到header标签
loader的特点希望单一，一个loader负责一个功能
loader的用法字符串只能使用一个loader 多个用[]
loader 的顺序默认是从右向左执行，从下向上
loader可以写成对象，为其添加属性：如：

{
	test: /\.css$/,
		 use: [{
				loader: 'style-loader',
				options:{
					insertAt:'top'
				}
			}, 'css-loader']
		}

接下来npm安装css-loader以及style-loader

npm install css-loader style-loader

运行 npm run dev 页面背景色变成了红色

接下来：在index.html中加如一个div

...
<body>
    <div>内容区</div>
</body>

添加一个less文件index.less

body{
  div{
    border: 1px solid #000;
  }
}

在index.js中引入：require(’./index.less’)

npm安装less less-loader

添加less配置

{
	test: /\.less$/, use: [{
			loader: 'style-loader'
		}, 'css-loader','less-loader']
	}

sass以及stylus的配置类似

上述的配置之后会将css样式以style标签的形式直接打包到html的header中，那如何以link的形式引入呢？

官网上有这么一个插件xtractTextWebpackPlugin，具体用法如下：

const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css"),
  ]
}

它会将所有的入口 chunk(entry chunks)中引用的 *.css，移动到独立分离的 CSS 文件。因此，你的样式将不再内嵌到 JS bundle 中，而是会放到一个单独的 CSS 文件（即 styles.css）当中。如果你的样式文件大小较大，这会做更快提前加载，因为 CSS bundle 会跟 JS bundle 并行加载。

多个实例

如果有多于一个 ExtractTextPlugin 示例的情形，请使用此方法每个实例上的 extract 方法。

const ExtractTextPlugin = require('extract-text-webpack-plugin');

// 创建多个实例
const extractCSS = new ExtractTextPlugin('stylesheets/[name]-one.css');
const extractLESS = new ExtractTextPlugin('stylesheets/[name]-two.css');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: extractCSS.extract([ 'css-loader', 'postcss-loader' ])
      },
      {
        test: /\.less$/i,
        use: extractLESS.extract([ 'css-loader', 'less-loader' ])
      },
    ]
  },
  plugins: [
    extractCSS,
    extractLESS
  ]
};

mini-css-extract-plugin 插件

详情请参考:
github文档
 npmjs文档

用法：

let MiniCssExtractPlugin = require('mini-css-extract-plugin')
plugins: [
		new MiniCssExtractPlugin({
			filename:'main.css'
		})
	],
	module: {
		rules: [
			{
				test: /\.css$/, use: [
				MiniCssExtractPlugin.loader,
				 'css-loader']
			},
			{
				test: /\.less$/, use: [MiniCssExtractPlugin.loader,'css-loader', 'less-loader']
			}
		]
	}

给样式加浏览器前缀

npm install postcss-loader autoprefixer

添加配置文件 postcss.config.js

module.exports = {
	plugin:[require('autoprefixer')]
}

rules配置中添加postcss-loader配置

rules: [
  			{
  				test: /\.css$/, use: [
  				MiniCssExtractPlugin.loader,
  				 'css-loader']
  			},
  			{
  				test: /\.less$/, use: [MiniCssExtractPlugin.loader,'css-loader', 'less-loader']
  			}
  		]

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

const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
module.exports = {
  optimization: {
    minimizer: [
      new UglifyJsPlugin({//压缩js
        cache: true,//缓存
        parallel: true,//并发
        sourceMap: true // set to true if you want JS source maps
      }),
      new OptimizeCSSAssetsPlugin({})//压缩css
    ]
  }
}

最后总的配置文件如下：

let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
let MiniCssExtractPlugin = require('mini-css-extract-plugin')
let UglifyJsPlugin = require("uglifyjs-webpack-plugin");
let OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
module.exports = {
	devServer: {//开发服务器配置
		port: 3000,
		progress: true,
		contentBase: './build',
		open: true
	},
	mode: 'development',
	entry: './src/index.js',//入口
	output: {
		filename: "bundle.[hash:8].js",//打包后的文件名
		path: path.resolve(__dirname, 'build')  //路劲必须是一个绝对路劲,_dirname指当前目录下的dist目录
	},
	optimization: {
		minimizer: [
			new UglifyJsPlugin({
				cache: true,
				parallel: true,
				sourceMap: true // set to true if you want JS source maps
			}),
			new OptimizeCSSAssetsPlugin({})
		]
	},
	plugins: [
		new HtmlWebpackPlugin({
			template: './src/index.html',
			filename: 'index.html',
			minify: {
				removeAttributeQuotes: true,
				collapseWhitespace: true
			},
			hash: true
		}),
		new MiniCssExtractPlugin({
			filename:'main.css'
		})
	],
	module: {
		rules: [
			{
				test: /\.css$/, use: [
				MiniCssExtractPlugin.loader,
				 'css-loader','postcss-loader']
			},
			{
				test: /\.less$/, use: [MiniCssExtractPlugin.loader,'css-loader','postcss-loader', 'less-loader']
			}
		]
	}
}

备注：本文是学习珠峰培训的webpack课程的学习笔记，后面会接着更新，相关的视频课程资源请见：webpack4.0视频教程：https://download.csdn.net/download/qq_39040042/10968119
各位，一起加油，good luck！

B21C

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack学习笔记——————样式处理

写这篇文章之前，先看一下我目前的webpack配置：let path = require('path')let HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = { devServer: {//开发服务器配置 port: 3000, progress: true, contentBase: '....
复制链接

扫一扫