#前端# webpack4基础到进阶

最新推荐文章于 2024-11-18 16:57:12 发布

自学IT的攻城狮

最新推荐文章于 2024-11-18 16:57:12 发布

阅读量239

点赞数

分类专栏： javascript 前端文章标签： webpack

本文链接：https://blog.csdn.net/weixin_43753747/article/details/106415584

版权

javascript 同时被 2 个专栏收录

7 篇文章 2 订阅

订阅专栏

前端

2 篇文章 0 订阅

订阅专栏

该博客详细介绍了如何从零开始初始化一个webpack4项目，涵盖了目录结构、配置入口和输出、设置代理服务器和热更新功能。还深入讨论了如何处理CSS，包括使用less和sass，自动添加浏览器前缀，以及整合bootstrap和jquery。此外，博主分享了如何自动生成HTML代码，使用插件分离CSS，并对CSS进行压缩优化。

摘要由CSDN通过智能技术生成

初始化一个webpack项目

npm init
npm install --save-dev webpack webpack-cli

webpack目录结构
在这里插入图片描述

配置入口和输出

- 创建 webpack.config.js
- 入口文件为 src/index.js
- 输出打包文件为 dist/bundle.js

const path = require('path')
module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }
   }

代理服务器和热更新

npm install webpack-dev-server --save-dev

- 加入配置
	devServer: {
        contentBase: './dist',
        host: 'localhost',
        port: 8000
    }

对css进行打包

npm install style-loader css-loader --save-dev

- 引入配置
	module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    }

使用less和sass

npm install less less-loader --save-dev
npm install sass-loader node-sass --save-dve

- less和sass的使用方式基本一致
	- less的文件后缀为 .less
	- sass的文件后缀为 .scss

- 引入配置
	module: {
        rules: [
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            }
        ]
    }

自动添加浏览器前缀

npm install postcss-loader autoprefixer --save-dev

- 在package.json文件中加入
	"browserslist": [
    "ie >= 8",
    "Firefox >= 20",
    "Safari >= 5",
    "Android >= 5",
    "Ios >= 6",
    "last 4 version"
  ]

- 引入配置
	module: {
        rules: [
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader',{
                    loader: 'postcss-loader',
                    options: {
                        plugins: [
                            require('autoprefixer')()
                        ]
                    }
                }],
               
            }
        ]
    }

编译后运行的效果图在这里插入图片描述
使用bootstrap

- npm install bootstrap@3
- 将font文件夹和css文件夹复制到src目录
- index.js 引入 import './css/bootstrap.min.css'
- webpack.config.js 配置
	- bootstrap文件打包配置
			{
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        outputPath: 'font'
                    }
                }]
            }
	- css文件打包配置(不设置会打包失败)
			{
                test: /\.(css)$/,
                use: ['style-loader', 'css-loader']
            }

使用jquery

- 第一种方法
	- npm install jquery --save-dev
	- src/index.js文件中引入 import jquery from 'jquery'
	- 使用
	$(function() {
		$('.header').addClass('one')
	})

- 第二种方法
	- 配置webpack.config.js
	- resolve: {
        alias: {
            JQuery: path.resolve(__dirname, 'src/js/jquery.min.js')
        }
    },
    plugins: [
        new webpack.ProvidePlugin({
            JQuery: "JQuery"
        })
    ]
    - 使用
    - JQuery(function() {
		    JQuery('#header').addClass('three')
		})

自动生成html代码

- npm install html-webpack-plugin
- 使用
const htmlWebpackPlugin = require('html-webpack-plugin')
// 加入配置
	plugins: [
        new htmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            minify: {
            	collapseWhitespace: true,
                removeTagWhitespace: true,
                removeAttributeQuotes:true,
                removeComments: true,
                removeEmptyElements: true,
                minifyCSS: true,
                minifyJS: true
            },
            hash: true
        })
    ]

使用分离css插件

- 安装
	- npm install mini-css-extract-plugin
- 引入
	- const MiniCssExtractPlugin = require('mini-css-extract-plugin')
- module.rules添加配置 
	- 		{
                test: /\.(css)$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            },
            {
                test: /\.less$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader',{
                    loader: 'postcss-loader',
                    options: {
                        plugins: [
                            require('autoprefixer')()
                        ]
                    }
                }]
            }
	- plugins添加配置
	- plugins: [
		new MiniCssExtractPlugin({
			filename: './css/index.css'
		})
	]

使用插件压缩css文件

- npm install optimize-css-assets-webpack-plugin
- 引入 
	- const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
- 使用
	- new OptimizeCssAssetsWebpackPlugin({
            assetNameRegExp: /\.css$/g, // 匹配需要优化或者压缩的资源名
            cssProcessor: require('cssnano'), // 压缩和优化的css处理器
            cssProcessorPluginOptions: { // css处理器插件选项
                preset: ['default', {discardComments: {removeAll: true}}] // 取出注释
            },
            canPrint: true  // 控制台允许打印内容
        })