Webpack打包集

最新推荐文章于 2023-05-17 10:19:28 发布

lls403

最新推荐文章于 2023-05-17 10:19:28 发布

阅读量204

点赞数

分类专栏： webpack打包文章标签： webpack javascript npm

本文链接：https://blog.csdn.net/lls403/article/details/112753190

版权

webpack打包专栏收录该内容

1 篇文章 0 订阅

订阅专栏

`Webpack`

一、初始化`webpack`

新建一个文件夹，进入cmd命令窗口输入:npm init -y会出现一个package.json文件夹
再输入npm install -d webpack 局部安装webpack
如果webpack版本超过4.0+(可在package.json文件中查看版本号)再输入npm install -d webpack-cli 安装命令行工具
在创建2个文件夹为dist、src，其中dist中创建一个index.html,src创建一个index.js(入口文件，通过此文件进行打包)
在命令行安装lodash依赖npm install lodash -p

二、配置`webpack.config.js`文件

默认配置内容

const path = require('path');
module.exports = {
    mode: 'development',//开发模式  production:生产模式
    entry: {
        index: "./src/js/index.js"//入口文件
    },
    output: {
        filename: 'js/[name].js',//打包后输出的文件，其中[name]：和入口文件一样的名字，js：创建一个js文件夹
        path: path.resolve(__dirname, 'dist')//打包好的文件存放路径，不写时默认存放在dist文件夹中，其中dist：是自己打包后的文件夹名字
    }
}

三、打包多个`js`

const path = require('path');
module.exports = {
    entry:{//打包多个js文件
       main : './src/index.js',//入口文件
       fun_02 : './src/fun02.js'
    },
   mode: 'development',//开发阶段(代码不压缩) 还有一种production代码压缩可以节省资源
    output:{//输出口
        filename:'[name].js',//[name]表示上面entry设置的key值
        path:path.resolve(__dirname,'dist')//文件导出放在哪个目录下,resolve()将相对路径转成绝对路径
    },
}

四、入口文件中引入外部文件

要引入的js文件
```
module.exports{
    a,numApp  
}
```
入口文件引入
```
import {a,numApp} from './fun01.js'
```

五、打包图片

npm install url-loader --save-d安装url导入图片路径的依赖

npm install file-loader --save-d 安装文件的依赖
在webpack.config.js配置url-loader

注:由于url-loader内部依赖file-loader所以file-loader不需要在use中书写，只要写url-loader即可

{ test: /\.(jpg|png|gif|svg)$/,//导入的图片格式为png，jpg，jif
                use: 'url-loader?limit=8192&name=imgs/[hash:8][name].[ext]'
                //limit是将打包的图片大小小于8192就传为base64导入
                //name=imgs/[hash:8][name].[ext] 通过name来规定打包的目录与文件名,[hash:8]是在生成的图片名前加上8位hash值
            }
//入口文件导入方法给js导入图片src
import _imgURL from './img/img01.jpg'//通过文件导入图片，需要用到file-loader依赖
$("._img").attr({src:_imgURL})
//Css文件
body,html{
    background:url('../img/img01.jpg');
}

六、打包字体文件

npm install file-loader --save-d安装文件的依赖(如果已安装可以省略)

配置webpack.config.js文件

{                 
    test:/\.(woff|woff2|svg|ttf|otf|eot)$/,
                use:'file-loader?name=font_icon/[name].[ext]'
//name属性是创建一个文件夹将字体文件打包到font_icon的文件夹中
            }

在css文件中导入字体

@font-face {font-family: "iconfont";
    src: url('../font_icon/iconfont.eot?t=1596203114871'); /* IE9 */
    src: url('../font_icon/iconfont.eot?t=1596203114871#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMQAAsAAAAABuwAAALCAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqBdIFxATYCJAMICwYABCAFhG0HMxsaBsgOJRERwYDhgkREBF9jv313h4lEungSDZGkpZIgVaZbado9k/+8+2npAMBlxFjC/JbTl58xOyDWUxMGj0meO4d/3Dv9EyiQ+YBynHNRF2C8NdA9MEooLaAuAGwYu4ngAd4mUG9YNM5GaXUzsFOARYE416rlwK7gVhQnVitUN+ws4o612nSTbgG3/PPxJzHsSKoyULB/VqIC+Z/JMMFysDJIRBGc5Yxw9pGxCCjEcWN4l6VwKJbqw1bGgWPlBp/J/ytUK47654lqILsRDOrsZ+Jg7qNWJFA8+/gO4HrSy1LVXuvQ26icfpnJvXZ89cIdiuW+eOG//lyw/pg8HcpdkW294s68yFC9fIm5uc33L0ufv25eedHSnMO9e1Hy6h139aXs+fPmQf+mtZuwpsP/0kQhnJZIuuOLOHw+pyj+SKUqzqrDIPX1p9DNrmXQJ6K/f/aTd16169JPtb3d9iOLvwWCW5kskER8fnD901jWXHnjNUVVDbKZc5avalVy+uOkFeQD3vycfv3m77jPb7GWumb/1zYU8FFZoOPKYpiV2puxBD+VM7CtxDygSSXkNMaTHdY3W1OvHhWmvd3HqfKuN4iHWl3vYa0xlEFWaxIt5CJUabAE1WotQ70FZfsbdCAsRanDvDENQqsrSJo9QdbqDi3kB6jS7SdUaw1LqHcanic2mA6tQxFBcopUUNEFtUpsYpCOOojcRqRuM8hJnseprYiwWh9MiI0vx8qQCZEl1rDt6kRKGcgQbISl2n3IYMDQTLAOKWmshlJzZlwc0/SkWCU2AgfrCESOQlQghS6QlhJmwtDulEPl/Y0QtTYGcqSjZcTaCiFY2smhBLHiB6BlYtOglkd5hNVOLRFFMSAGgRlBpZoRMcAwBpmbp+kgSlQszYSgWaY4oxMzVBy7vdT4d3ugHlCkgKas7slTYyhiKQAAAA==') format('woff2'),
    url('../font_icon/iconfont.woff?t=1596203114871') format('woff'),
    url('../font_icon/iconfont.ttf?t=1596203114871') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
    url('../font_icon/iconfont.svg?t=1596203114871#iconfont') format('svg'); /* iOS 4.1- */
  }
  
  .icon {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .icon-icon-test:before {
    content: "\e634";
  }

运行npx webpack 开始打包

七、打包`css`/`less`/`sass`文件

(1)不分离的打包`css`文件(嵌套在`js`文件一起加载使用)

安装css依赖 npm install -d style-loader css-loader
在需要打包的入口文件中导入css文件（此处入口文件依然是index.js）
```
import './css/style_01.css'//导入css文件
```

在webpack.config.js配置文件中输入

module: {
        rules:[//处理规则，是个数组可以有多个规则
            {
                test : /\.css$/,//引入的文件是后缀为.css的文件
                use : ['style-loader','css-loader']//通过这两个loader进行处理（此处顺序不能写反，由右向左进行处理）
            }
        ]
    }

运行npx webpack 进行打包

(2)不分离的打包less文件（sass文件打包方式同理）

npm install less --save-dev 安装less服务

npm install less-loader --save-dev安装less-loader用来打包

（1）配置webpack.config.js文件

{//不分离打包less
                test: /\.less$/,
                use:['style-loader','css-loader','less-loader']
             }

入口文件index.js导入less文件

import './less/less01.less'//导入less文件

运行npx webpack开始打包

(3)分离的打包`css`/less/sass文件(嵌套在`js`文件一起加载使用)

npm install mini-css-extract-plugin --save-dev将css/less/sass文件单独分离出来

注：如果报错：Tapable.plugin is deprecated. Use new API on.hooksinstead

由于版本不支持使用npm install extract-text-webpack-plugin@next

在webpack.config.js配置添加

 plugins: [
        new MiniCssExtractPlugin({
            filename: 'css/[name].css'
        })
    ]

修改css/less/sass的配置

{//分离打包css
                test: /\.css$/,//引入的文件是后缀为.css的文件
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: '../',//处理css导入的背景图片
                    }
                },
                    'css-loader'
                ]
            },
{//分离打包less
                test: /\.less$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: '../',//处理css导入的背景图片
                    }
                },
                    'css-loader',
                    'less-loader'
                ]
            }

在入口文件index.js中引入

import './css/style_01.css'//导入css文件
import './css/style_02.css'//导入css文件

运行npx webpack开始打包
在index.html中引用css文件

<link href="./css/main.css" rel="stylesheet" type="text/css" />

八、打包html文件

npm install html-webpack-plugin --save-d安装依赖

在webpack.config.js配置

 new HtmlWebpackPlugin({
            template: './html/html01.html',//指定哪一个文件进行打包
            filename: 'html/index01.html',//打包后的文件名字
            chunks: ['fun_02'],//需要注入的文件填entry中的key值，css文件也在该入口文件中导入
            excludeChunks: ['fun01.js', 'entry02.js'],//不往里卖弄注入的文件
            inject: true/*true或者body：所有JavaScript资源插入到body元素的底部
                         head: 所有JavaScript资源插入到head元素中
                         false： 所有静态资源css和JavaScript都不会注入到模板文件中*/
        })

注：需要打包的html文件不能放在src目录中（即和配置文件同级）

运行npx webpack 开始打包
需要打包html文件中的img标签需要安装

npm install html-loader --save-d

注：html文件中引入的img文件不能放在src目录中（即和配置文件同级）
打包html文件时需要注入css文件，只需要往entry中的js文件中引入即可
```
import './css/style_01.css'
```

九、引入其他模块

(1)引入`jquery`

npm install jquery --save-dev安装jquery

在入口文件中导入jquery

import $ from 'jquery'//导入jquery脚本

正常使用jquery通过$使用

十、打包出现中文乱码

安装 npm i webapck-encoding-plugin --save依赖

const WebpackEncodePlugin = require('webpack-encoding-plugin');

  plugins: [
        new WebpackEncodingPlugin({
            encoding: "utf-8"
        })]

lls403

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Webpack打包集

Webpack一、初始化webpack新建一个文件夹，进入cmd命令窗口输入:npm init -y会出现一个package.json文件夹再输入npm install -d webpack 局部安装webpack如果webpack版本超过4.0+(可在package.json文件中查看版本号)再输入npm install -d webpack-cli 安装命令行工具在创建2个文件夹为dist、src，其中dist中创建一个index.html,src创建一个index.js(入口文件，通过此文
复制链接

扫一扫