三、webpack4.0优化

最新推荐文章于 2024-04-26 17:09:13 发布

Razas

最新推荐文章于 2024-04-26 17:09:13 发布

阅读量557

点赞数 1

分类专栏： WEBPACK4 文章标签： webpack4.0

本文链接：https://blog.csdn.net/qq_25354709/article/details/87775425

版权

一、noParse

新建一个 WEBPACK-OPTIMIZE 项目。

主要来讲一下webpack的优化。

初始化package.json。

npm init -y

安装：

npm install webpack webpack-cli html-webpack-plugin @babel/core babel-loader @babel/preset-env @babel/preset-react -D

新建项目文件：

webpack

public/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="root"></div>
</body>
</html>

src/index.js:

console.log('hello')

在webpack.config.js中进行配置：

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    // 开发模式还是生产模式
    mode: 'development',
    // 入口文件
    entry: './src/index.js',
    // 规则
    module: {
        rules: [
            {
                // 匹配所有的js文件
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            // 将ES6、7转换成ES5语法
                            '@babel/preset-env',
                            // 解析react语法
                            '@babel/preset-react'
                        ]
                    }
                }
            }
        ]
    },
    // 输出的路径
    output: {
        // 输出的文件名
        filename: 'bundle.js',
        // 生成一个dist目录
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new HtmlWebpackPlugin({
            // 选择哪个html文件作为打包的模板
            template: './public/index.html'
        })
    ]
}

运行打包命令：

npx webpack

1、第一个优化项

比如：我们可能会在页面中使用jquery。

安装：

npm install jquery --save

在src/index.js中引入jquery:

import jquery from 'jquery';

在webpack.config.js中进行配置：

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    // 开发模式还是生产模式
    mode: 'development',
    // 入口文件
    entry: './src/index.js',
    // 规则
    module: {
        // 不去解析jquery的包
        // 相当于jquery这个包不需要去解析
        // noParse 的意思就是不去解析jquery中的依赖库。 可以提高打包的速度。
        noParse: /jquery/,
        rules: [
            {
                // 匹配所有的js文件
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            // 将ES6、7转换成ES5语法
                            '@babel/preset-env',
                            // 解析react语法
                            '@babel/preset-react'
                        ]
                    }
                }
            }
        ]
    },
    // 输出的路径
    output: {
        // 输出的文件名
        filename: 'bundle.js',
        // 生成一个dist目录
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new HtmlWebpackPlugin({
            // 选择哪个html文件作为打包的模板
            template: './public/index.html'
        })
    ]
}

运行打包：

npx webpack

二、IgnorePlugin

在匹配所有js文件的过程中，默认情况下也会去查找node_modules目录。

moment.js 是一个处理时间的库。

比如：格式化时间。

moment().format('MMMM Do YYYY, h:mm:ss a');
moment().format('dddd');
moment().format("MMM Do YY");
moment().format();

安装：

npm install moment --save

再安装一下 webpack-dev-server。

npm install webpack-dev-server -D

在package.json里面配置一下启动脚本：

 "scripts": {
    "dev": "webpack-dev-server",
    "build": "webpack"
  },

在src/index.js中引入moment:

import jquery from 'jquery';
import moment from 'moment';

// 手动引入所需要的语言
// 只引用一个语言包
import 'moment/locale/zh-cn';

// 指定语言是中文
moment.locale('zh-cn');

let r = moment().endOf('day').fromNow();
console.log(r);

在webpack.config.js中进行配置：

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let webpack = require('webpack');

module.exports = {
    // 开发模式还是生产模式
    mode: 'development',
    // 入口文件
    entry: './src/index.js',
    // 规则
    module: {
        // 不去解析jquery的包
        // 相当于jquery这个包不需要去解析
        // noParse 的意思就是不去解析jquery中的依赖库。 可以提高打包的速度。
        noParse: /jquery/,
        rules: [
            {
                // 匹配所有的js文件
                test: /\.js$/,
                // 排除node_modules， 不查找node_modules目录
                exclude: /node_modules/,
                // 只查找src目录
                include: path.resolve('src'),
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            // 将ES6、7转换成ES5语法
                            '@babel/preset-env',
                            // 解析react语法
                            '@babel/preset-react'
                        ]
                    }
                }
            }
        ]
    },
    // 输出的路径
    output: {
        // 输出的文件名
        filename: 'bundle.js',
        // 生成一个dist目录
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        // 把./locale给忽略掉，不去查找
        // 这样的话，打包后的话，语言包不会被打包
        new webpack.IgnorePlugin(/\.\/locale/, /moment/),
        new HtmlWebpackPlugin({
            // 选择哪个html文件作为打包的模板
            template: './public/index.html'
        })
    ]
}

运行：

npm run dev

三、dllPlugin

动态连接库。

安装：

npm install react react-dom --save

在src/index.js中使用react:

最低0.47元/天解锁文章

Razas

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
三、webpack4.0优化

一、noParse新建一个 WEBPACK-OPTIMIZE 项目。主要来讲一下webpack的优化。初始化package.json。npm init -y安装：npm install webpack webpack-cli html-webpack-plugin @babel/core babel-loader @babel/preset-env @babel/pre...
复制链接

扫一扫