webpack基础应用

原创于 2023-03-14 11:53:14 发布 · 388 阅读

CC 4.0 BY-SA版权

文章标签：

本文介绍了webpack作为自动化打包工具的基础操作，包括如何处理JavaScript、CSS、图片等资源，以及如何通过配置实现模块的合并、压缩和浏览器兼容性处理。同时，提到了webpack-dev-server在开发环境中的作用，以及使用HTMLWebpackPlugin和MiniCssExtractPlugin进行HTML和CSS的处理。

webpack基础应用

概述和基础操作

自动化打包工具：webpack

传统项目：

通过script引js

html一个 js一个，所有所用到的js按照依赖关系谁先引谁后引最终合到一个js，并且能进行压缩，并且能进行词法解析词法检测。有助于性能优化

那这些依托工具来实现图片base64，那就不需要http请求而且浏览器能直接渲染。不需要解码编译过程

less：浏览器不能直接识别，less编译成css

把新语法能够变成老语法兼容的那种形式

@import require

fs: 建立依赖关系，根据依赖关系读取到每个文件的内容最终合到一个文件并进行压缩。基于fs来完成。

yarn 快

全局：使用命令。但是只能安装一个版本

本地：import 或 require

4.0 需要安装的

webpack webpack-cli

webpack-cli: 命令提示工具。webpack里面用来进行操作命令操作的模块

开发环境依赖：基于webpack把项目打包好了，部署到服务器上的时候就不需要webpack。

npx

但是npx能执行本地安装的模块，能把本地的模块当做命令使用

npx webpack：基于npx执行webpack命令。

工作原理：xxx.cmd

/node_modules/.bin/webpack.cmd

package.json中配置可执行脚本命令scripts

package.json中配置可执行脚本命令

浏览器肯定不支持commonjs 和 es6 规范的

自定义配置*

src/main.js

基于webpack配置自己的规则，走自己的规则实现自己的效果

webpack给了一个默认的文件，必须写在默认文件里才行

会去项目根目录下找webpack.config.js，若有就走自己的规则若没有就走默认打包规则；

webpack是基于nodejs，那么我们写webpack的时候都需要commonjs来导出去

压缩后的代码：

放到服务器后的东西得压缩

把es6 commonjs的语法识别，自己重构一套模块规范的语法

原生js怎么实现commonjs规范怎么实现es6规范

使用--config 改变配置文件名称

真实项目中，webpack.config.dev.js/webpack.config.pro.js配置2套或3套

var path = require('path');

// var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        filename: "bundle.min.js",
        // 输出路径必须是绝对路径
        path: path.join(__dirname,"/dist"),
    },
    // plugins: [
    //     new HtmlWebpackPlugin({
    //         template: path.join(__dirname + "/app/index.html")
    //     }),
    // ],
    // devServer: {
    //     port:3000,
    //     contentBase: "./",
    //     hot: true,
    //     proxy:{
    //         '/jsonapi':{
    //             target:'http://127.0.0.1:8080',
    //             changeOrigin:true
    //         }
    //     }
    // }
}

webpack-dev-server*

帮我们创建一个开发服务

创建一个后台服务：接收客户端请求静态资源文件的请求处理+接口的请求处理

这也是个开发依赖部署到服务器上已有服务，只有开发的时候才需要自己启一个服务自己来做

服务就得有：协议+域名+端口号

作用：webpack-dev-server打包+启动服务; webpack只能打包

自动访问build目录下的index.html

var path = require('path');

// var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        filename: "bundle.min.js",
        // 输出路径必须是绝对路径
        path: path.join(__dirname,"/build"),
    },
    // plugins: [
    //     new HtmlWebpackPlugin({
    //         template: path.join(__dirname + "/app/index.html")
    //     }),
    // ],
    devServer: {
        port:3000,
        // contentBase: "./build",
        contentBase: path.join(__dirname, 'build'),
        hot: true,
        open:true,
        // proxy:{
        //     '/jsonapi':{
        //         target:'http://127.0.0.1:8080',
        //         changeOrigin:true
        //     }
        // }
    }
}

HTML输出编译

目前只能实现js的合并压缩打包

css js HTML img

每个插件都是一个类

编译HTML 打包build目录下。把HTML也能实现压缩

把编译后的js自动引入到HTML中

浏览器访问的时候有缓存

script get请求

link img iframe

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        filename: "bundle.min.[hash].js",
        // 输出路径必须是绝对路径
        path: path.join(__dirname,"/build"),
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: "index.html"
        }),
    ],
    devServer: {
        port:3000,
        // contentBase: "./build",
        contentBase: path.join(__dirname, 'build'),
        hot: true,
        open:true,
        // proxy:{
        //     '/jsonapi':{
        //         target:'http://127.0.0.1:8080',
        //         changeOrigin:true
        //     }
        // }
    }
}

css样式

处理html的用的是插件

css-loader：@import url, 导入外部资源的语法能进行编译和处理

入口js要引入css

css兼容

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        filename: "bundle.min.[hash].js",
        // 输出路径必须是绝对路径
        path: path.join(__dirname,"/build"),
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: "index.html"
        }),
    ],
    devServer: {
        port:3000,
        // contentBase: "./build",
        contentBase: path.join(__dirname, 'build'),
        hot: true,
        // open:true,
        // proxy:{
        //     '/jsonapi':{
        //         target:'http://127.0.0.1:8080',
        //         changeOrigin:true
        //     }
        // }
    },
    module: {
        rules:[
            {
                test:/\.(css|less)$/,
                use:[
                    'style-loader',
                    'css-loader',
                    'postcss-loader',
                    'less-loader'
                ]
            },
        ]
    }
}

module.exports={
    plugins:[
        require('autoprefixer')
    ]
}

css的抽离和压缩

抽离css

1.new MiniCssExtractPlugin({ filename:'main.min.css' })

2.use:[
    // 'style-loader',
    MiniCssExtractPlugin.loader,
    'css-loader',
    'postcss-loader',
    'less-loader'
]

3.optimization: {
        minimizer: [
            new OptimizeCssAssetsWebpackPlugin()
        ]
    },

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin'),MiniCssExtractPlugin=require('mini-css-extract-plugin'),OptimizeCssAssetsWebpackPlugin=require('optimize-css-assets-webpack-plugin'),UglifyjsWebpackPlugin=require('uglifyjs-webpack-plugin');
module.exports = {
    optimization: {
        minimize: true,
        minimizer: [
            new OptimizeCssAssetsWebpackPlugin({}),
            new UglifyjsWebpackPlugin({
                cache:true,
                parallel:true,
                sourceMap:true,
            })
        ]
    },
}