Webpack 复习小结

nodejs学习参考
node常用命令:
node xxx.js
执行js文件
npm init -y
初始化package.json
npm i 软件包名
下载软件包到本地
npm i 软件包名 -g
下载软件包到全局
npm uni 软件包名
删除软件包

系统优化CDN使用

CDN for free

需求:开发模式使用本地第三方库,生产模式下使用CDN加载引用
步骤:
1.在index.html文件中引入第三方CDN地址,并用模板语法判断
index.html

...
<% if(htmlWebpackPlugin.options.useCDN){ %>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.min.js">script>
<% } %>
...

webpack.config.js

plugins: [
  new HtmlWebpackPlugin({
      template: './public/index.html', // html模板文件
      filename: './index.html', // html输出文件名
      useCDN: process.env.NODE_ENV === 'production',
      favicon: './public/favorite.png'
  }),
],

2.配置webpack.config.js中externals外部扩展选项(防止某些import的包被打包)

/*生产模式下,排除掉 使用CDN引入加载的资源*/
if (process.env.NODE_ENV === 'production') {
    config.externals = {
        //key : import from 语句后面的字符串
        //value: 留在原地的全局变量(最好和CDN在全局暴露的变量一致)
        'axios': 'axios'
    }
}

多页面打包

未成功加载

开发环境调错

问题:代码被压缩和混淆,无法正确定位源代码位置(行数和列数)
source map :可以准确追踪error和warning在原始代码中的位置
设置:webpack.config.js配置devtool选项

/*开发模式下使用devtool = inline-source-map,便于查找错误*/
if (process.env.NODE_ENV === 'development')
    config.devtool = 'inline-source-map'

inline-source-map选项:把源码的位置信息一起打包在js文件内
注意:source-map仅适用于开发环境,不要在生产环境使用(防止被轻易查看源码位置)

打包模式

打包模式:告知webpack使用响应的内置优化
开发模式:development 调试代码;实施加载;模块热替换等;适用于本地开发
生产模式:production 压缩代码;资源优化;更轻量;适用于打包上线

设置方式1:
package.json

"build": "webpack --mode=production",
"dev": "webpack serve --open --mode=development"

设置方式2:
webpack.config.js

const config = {
//mode: 'development',
mode: 'production',
}

命令行设置的优先级高于配置文件中的,推荐使用命令行设置

应用

需求:在开发模式下用style-loader内嵌,加载更快,再生产模式下提取css代码
借助cross-env(跨平台通用)包命令,设置参数区分环境
步骤:

  1. 下载 cross-env软件包到当前项目
    npm i cross-env --save-dev
  2. 配置自定义命令,传入参数名和值(会绑定到process.env对象下)
"build": "cross-env NODE_ENV=production webpack --mode=production",
"dev": "cross-env NODE_ENV=development webpack serve --open --mode=development"
  1. webpack.config.js区分不同环境使用不同配置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
/*css 分别打包*/
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
/*css 代码压缩插件*/
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const webpack = require('webpack')

const config = {
    // mode: 'development',
    entry: {
        index: './src/main.js',
        // print: './src/print.js',
    },
    // devtool: 'inline-source-map',
    devServer: {
        /*默认以 public/index.html ,可以将dist目录启动为服务*/
        // static: './dist',
        //启动服务后自动弹出页面
        // open: true
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                // use: [MiniCssExtractPlugin.loader, "css-loader"],
                /*开发模式下, 内嵌css样式,让热替换更快
                生产模式下提取css代码,让浏览器缓存 并行下载js和css文件*/
                use: [process.env.NODE_ENV === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader, "css-loader"],
            },
            {
                test: /\.less$/i,
                use: [
                    // compiles Less to CSS
                    process.env.NODE_ENV === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader,
                    'css-loader',
                    'less-loader',
                ],
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html', // html模板文件
            filename: './index.html', // html输出文件名
            useCDN: process.env.NODE_ENV === 'production',
            favicon: './public/favorite.png'
        }),
        new MiniCssExtractPlugin({
        }),
        //允许在 编译时 将前端代码中的变量替换为其他值或表达式
        new webpack.DefinePlugin({
            // 定义...
            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
        }),
    ],
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
        clean: true,
    },
    optimization: {
        runtimeChunk: 'single',
        minimizer: [
            // 在 webpack@5 中,你可以使用 `...` 语法来扩展现有的 minimizer(即 `terser-webpack-plugin`),将下一行取消注释
            `...`,
            new CssMinimizerPlugin(),
        ],
    },
    /*配置别名变量*/
    resolve: {
        alias: {
            '@': path.join(__dirname, 'src')
        }
    }
}

/*开发模式下使用devtool = inline-source-map,便于查找错误*/
if (process.env.NODE_ENV === 'development')
    config.devtool = 'inline-source-map'

/*生产模式下,排除掉 使用CDN引入加载的资源*/
if (process.env.NODE_ENV === 'production') {
    config.externals = {
        //key : import from 语句后面的字符串
        //value: 留在原地的全局变量(最好和CDN在全局暴露的变量一致)
        'axios': 'axios'
    }
}
module.exports = config

你可能感兴趣的:(webpack,前端,node.js)