webpack从入门到精通

webpack

概念

webpack本质是第三方模块包 用于分析,并打包代码

作用

自动整合,压缩,剔除无用代码技术

1. 减少文件数量
2. 缩减代码体积
3. 提高浏览器打开速度

• sass/less => css
• img
• es降级
• 压缩代码,提高加载速度

配置

初始化

npm init

安装

npm i webpack webpack-cli -D

自定义命令

"script":{
    "build":"webpack"
}

基础使用

1. src/index.js-默认的打包入口
2. 引入add模块到入口文件
3. 运行build命令,webpack打包文件
4. 打包后默认生成dist和main.js,观察代码

修改默认出入口

const path = require('path')

module.exports = {
    entry: './src/index.js', //入口
    output: { // 出口
        path: path.resolve(__dirname, 'dist'),
        filename:'bundle.js' // 出口名字
    }
}

1. 在文件根目录创建webpack.config.js文件
2. 在文件夹中写入配置文件

npm run build都干了什么?

注意:所有的打包资源都要跟入口产生直接/或间接的关系

把打包的js引入网页

1. 在src文件夹下创建public文件夹,里面创建页面index.html文件

2. 安装插件: npm i html-webpack-plugin -D并配置文件

const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [new HtmlWebpackPlugin(
        {template : './src/public/index.html'}
    )],

在网页引入css文件

1. 在src文件夹下面创建css文件夹,再创建index.css

2. 在入口文件main.js文件直接导入index.css文件

3. 安装模块npm install --save-dev css-loader和npm install stylus stylus-loader --save-dev

  // css导入文件
    module: { // 加载器
        rules: [ // 规则
          {
            test: /\.css$/i,  // 配置.css结尾的文件
            use: ["style-loader", "css-loader"], // 处理css文件
          },// 从左往右 不能颠倒
        ],
      },

less文件配置

1. 创建文件src=>less=>index.less,并编写样式代码

2. 在入口文件main.js中引入index.less文件

3. 安装模块npm install --save-dev less less-loader

    // css导入文件
    module: { // 加载器
        rules: [ // 规则
            {
                test: /\.css$/i, // 配置.css结尾的文件
                use: ["style-loader", "css-loader"], // 处理css文件
            }, // 从左往右 不能颠倒

            {// less 加载规则
                test: /\.less$/i,
                use: ["style-loader", "css-loader","less-loader"], // 处理css文件
            }
        ],
    },

处理图片文件

1. 创建文件src=>assets=>图片文件

2. 在入口文件main.js中导入图片文件,或者在less中使用图片文件

3. 配置文件

{ // 图片文件配置
    test: /\.(gif|png|jpg|jpeg)/,
    type:'asset'
}

图片翻译成base64

• 小于8k才会转为base64
• 好处:浏览器不用请求了,读取图片快
• 坏处:图片过大,比原来大百分之三十左右

处理字体文件

1. 把字体图标文件放到assets文件中

2. 在index.less中导入字体图标样式

3. 在index.html文件中实用字体图标

4. 配置字体图标文件

{ // webpack5默认内部不认识这些文件, 所以当做静态资源直接输出即可
    test: /\.(eot|svg|ttf|woff|woff2)$/,
    type: 'asset/resource',
    generator: {
    	filename: 'font/[name].[hash:6][ext]'
    }
}

5. 打包使用

处理高版本js语法

1. 安装解析js高级语法的模块npm i -D babel-loader @babel/core @babel/preset-env

2. 配置文件

{ // js高级语法降级处理
    test: /\.js$/,
    exclude: /(node_modules|bower_components)/,
    use: {
        loader: 'babel-loader',
        options: {
            presets: ['@babel/preset-env'] // 预设:转码规则(用bable开发环境本来预设的)
        }
    }
}

开发服务器

为啥需要开发服务器?

每次打包,才能看到新效果,非常耗时

开发服务器的好处:

• 快
• 强
• 方便

怎么样开发服务器?

1. 安装模块:npm i webpack-dev-server -D
2. 自定义命令"serve":"webpack serve",
3. 配置文件

module.exports = {
	    mode:'production',
	    devServer: {
	        static: './dist',
	        open: true,
	        hot: true,
	        port: 3000
	    },
    }

4. 启动服务器,终端命令:npm run serve