webpack基本原理（2）

最新推荐文章于 2024-11-07 16:48:24 发布

原创最新推荐文章于 2024-11-07 16:48:24 发布 · 253 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了Webpack的配置与优化技巧，包括html-webpack-plugin、css处理、less支持、优化插件及本地服务设置等，帮助开发者提升前端项目构建效率。

因为index.html 文件已经写死了，js都写死了
html-webpack-plugin
安装

npm install html-webpack-plugin --save-dev

使用

const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports={
	mode:'production',
	entry:'./src/index.js',
	output:{
		filename:'main.js',
		path:__dirname+'/dist'
	},
	plugins:[
		new htmlWebpackPlugin({
			template:'./src/index.html'
		})
	]
}
# 项目mypack目录机构如下
src
	header.js
	index.html
	index.js
package.js
webpack.config.js

下面我再来介绍几个参数，以及它的结果。
filename: ‘index.html’ 默认情况下生成的 html 文件叫 index.html，但有时候你不想叫这个名字，可以改。

filename:'youIndex.html'

minify压缩去空格

minify: {
  collapseWhitespace: true,
},

处理css

css-loader 分析css关系-合并一个css（import）
style-loader 把css挂载到head里面
mini-css-extract-plugin 把css抽取到单独文件
optimize-css-assets-webpack-plugin用于压缩css文件，它将在webpack构建期间搜索css资源，并将优化/最小化css
less less-loader 处理less文件

npm install css-loader style-loader mini-css-extract-plugin  optimize-css-assets-webpack-plugin -D

index.js

import {header} from './header.js'
import './css/style.css'
import './css/style.less'
document.body.append(header);

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports={ 
    optimization: {
        minimizer: [ new OptimizeCSSAssetsPlugin({})],
      },  
    mode:'production',
    entry:'./src/index.js',
    output:{
        filename:'main.js',
        path:__dirname+'/dist'
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[MiniCssExtractPlugin.loader,/* 'style-loader', */'css-loader']
            },
            {
                test:/\.less$/,
                use:[MiniCssExtractPlugin.loader,/* 'style-loader', */'css-loader','less-loader']
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        }),
        new MiniCssExtractPlugin({
            filename: 'style.css',
            
          }),
    ]
}

webpack-dev-server

webpack-dev-server 本地服务
clean-webpack-plugin 清理dist目录
安装

npm install   clean-webpack-plugin webpack-dev-server  -D

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports={
    devServer: {
        contentBase: './dist',
     },
    optimization: {
        minimizer: [ new OptimizeCSSAssetsPlugin({})],
      },  
    // mode:'production',
    entry:'./src/index.js',
    output:{
        filename:'main-[hash].js',
        path:__dirname+'/dist'
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[MiniCssExtractPlugin.loader,/* 'style-loader', */'css-loader']
            },
            {
                test:/\.less$/,
                use:[MiniCssExtractPlugin.loader,/* 'style-loader', */'css-loader','less-loader']
            }
        ]
    },
    plugins:[
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        }),
        new MiniCssExtractPlugin({
            filename: 'style.css',
            
          }),
    ]
}