Webpack（入门级知识点）

最新推荐文章于 2024-06-04 09:23:22 发布

孙大奎

最新推荐文章于 2024-06-04 09:23:22 发布

阅读量503

点赞数

文章标签： webpack 前端 javascript

本文链接：https://blog.csdn.net/qq_50137003/article/details/128998068

版权

一，概念

Webpack 是一个现在JavaScript应用程序的静态模块打包器。处理应用程序时，会递归构建一个依赖关系图，其中包括应用程序需要的每个模块，将所有的模块打包成一个或者多个bundle

简单来说 webpack是一个打包工具，把复杂的各种文件通过自身，打包输出成为CSS，JS，图片

二，安装

1.安装（前提确保安装了node.js）

1. 创建一个mypack文件夹

2。初始化项目文件夹

3.安装webpack webpack-cli

2.准备文件

1.dist 文件生成目录

# index.html
<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>第一个webpack页面</title>
</head>
<body>
 <script src="./bundle.js"></script>   
</body>
</html>
<!--打包好的js名称默认是main.js-->

2.index.js 主入口文件

#main.js
import {header} from './header.js'
document.body.append(header);
 
#header.js
//创建一个div节点
var header =document.createElement("div");
//设置文本内容
header.innerHTML="你好webpack from header";
//导出
export {header};

3.使用配置文件

1.在项目目录新建一个 webpack.config.js

2.webpack默认配置文件

// 引入node的 path路径模块
const path = require('path')
// module.export node中导出模块的意思
module.exports={
    // 入口
    entry:'./src/main.js',
    //输出
    output:{
        //打包好的文件名
        filename:'bundel.js',
        //目录：当前目录下的 dist目录
        path:path.resolve(__dirname,'dist')
        // 定义文件夹 
        // __dirname获取当前目录
        // path.resolve 方法将路径或路径片段的序列解析为绝对路径
    }
}
# 以下为纯净版本
const path = require('path')
module.exports={
    entry:'./index.js',
    output:{
        filename:'main.js',
        path:__dirname+'/dist',
    }
}

3. 最后执行命令 npx webpack 实现打包

四，配置scripts

1. 找到package.js 配置scripts

"scripts":{
    "serve":  "webpack"
}

2.这样我们可以执行

npm run start

五，配置模式

const path = require('path')
module.exports={
    mode:'development', //开发模式
    // mode:'production',// 产品模式
    entry:'./index.js',
    output:{
        filename:'main.js',
        path:path.resolve(__dirname,'dist')

产品模式打包的大小要比生产模式要小的多

"scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  }

六，html-webpack-plugin

1.1安装

npm i html-webpack-plugin --save-dev

1.2使用

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

1.3 html-webpack-plugin 参数

1.3.1filename

'index.html' 默认情况下生成的 html 文件叫 index.html，但有时候你不想叫这个名字，可以改。

filename:'youIndex.html'

1.3.2minify压缩去空格

这个可以把生成的 index.html 文件的内容的没用空格去掉，减少空间。

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文件

1.安装

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

2.index.js

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

3.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

1.说明

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

2.安装

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

3.webapck.config.js添加如下设置

module.exports = {
    devServer: {
        host: 'localhost', //主机地址，默认是localhost
        port: '8080', //端口号，默认8080
        open: true, //自动打开页面
        hot:true,//热更新
    },
};

4.package.json中添加开发环境启动指令

{
  "scripts": {
    "dev": "webpack serve"
  }
}
执行npm run dev，即可在开发环境下运行项目了

九，前端跨域代理

前端通过代理处理跨域问题，只适用开发环境。对于需要代理的接口，我们将接口服务器替换成devServer，由devServer来帮助我们完成代理请求。所以在项目源代码中，我们需要自行根据开发环境以及接口是否需要代理，来判断该接口请求的服务器地址是否需要换成devServer的地址。

module.exports = {
    devServer: {
        proxy: {
            //哪些访问需要代理转发
            '/api': {
                target: 'http://47.110.129.207',//目标服务器
                changeOrigin: true, 
                secure: false,  
                credentials: 'include', 
                pathRewrite: {
                    '^/api': '' //重写路径，不需要重写则为‘’
                }
            }
        }
    }
}

1.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',
            
          }),
    ]
}

十，图片与文件处理

file-loader可以解析项目中的url引入（不仅限于css）使之指向正确的文件
url-loader 会将小图片生成base64编码格式(url-loader封装了file-loader)
image-webpack-loader 插件可将大的图片进行压缩从而缩小打包体积
html-loader html 代码里处理 img 标签的 loader。

1.style.css

@import '../assets/font/iconfont.css';
 
div{ color:red;}
body{ background-image: url('../assets/sun.jpg');}

2.index.js

import {header} from './header.js'
import './css/style.css'
import './css/style.less'
import pic from './assets/pic1.jpg'
document.body.append(header);
 
var img = new Image();
img.src=pic;
 
 
// img.src=pic;
document.body.append(img);
var box = document.createElement("div");
box.innerHTML='<span class="iconfont icon-shouye1"></span> <span class="iconfont icon-shouye"></span>';
document.body.append(box);

3.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: /\.(png|jpg|gif|jpeg|ico)$/,
                use:[{loader:'url-loader',options:{limit:50000,name: 'img/[name].[hash:5].[ext]'},'image-webpack-loader']
            },
            {
                test:/\.css$/,
                use:[MiniCssExtractPlugin.loader,/* 'style-loader', */'css-loader']
            },
            {
                test:/\.(eot|woff2|woff|ttf|svg)/,
                use:[{loader:'url-loader',options:{limit:10,name: 'font/[name].[hash:5].[ext]'}}],
            },
            {
                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',
            
          }),
    ]
}

十一，设置目录别名

module.exports = {
    resolve: {
        alias: {
            '@': path.resolve(__dirname, './src'), //设置@为src目录的别名
        }
    },
};

十二，public公共静态资源目录拷贝

1.安装

npm install --save-dev copy-webpack-plugin

2.webpack.config.js添加如下配置

const CopyWebpackPlugin = require('copy-webpack-plugin');
 
module.exports = {
    plugins: [
        new CopyWebpackPlugin(  // 设置静态目录（拷贝文件到另外一个文件夹）
            {patterns:[  
                // { from: __dirname+'/public', to: __dirname+'/dist' },
                //from 从， to 到 __dirname 当前目录
                { from: __dirname+'/../src/static', to: __dirname+'/dist/static' },
             ],
            }
        ),
    ],
};

3.参数说明

rom 定义要拷贝的源文件            from：__dirname+'/public'
to      定义要拷贝到的目标文件夹 to: __dirname+'/dist/public'
toType file 或者 dir                        可选，默认是文件
force   强制覆盖前面的文件            可选，默认是文件
context                                            可选，默认base   context可用specific context
flatten 只拷贝指定的文件               可以用模糊匹配
ignore 忽略拷贝指定的文件            可以模糊匹配