webpack 优化

Over_and_over_again
410 阅读1分钟

附上 www.cnblogs.com/sichaoyun/p…

19：noParse

这是module中的一个属性，作用： 不去解析属性值代表的库的依赖

参考 blog.csdn.net/qq_17175013…

1、创建 webpack-optimize 文件夹

2、初始化

npm init -y

3、安装各种包

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

4、打开文件目录，新建 webpack.config.js 文件

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    mode:'development', 
    // mode:'development'：开发模式，加上这个打包后的代码不会压缩，
    // 不加，会自动打包成生产模式，代码会压缩
    entry:'./src/index.js',
    module:{
        noParse:/jquery/, // 不去解析jquery中的依赖库
        rules:[
            {
                test:/\.js$/,use:{
                    loader:'babel-loader',
                    options:{
                        presets:[
                            '@babel/preset-env',
                            '@babel/preset-react'
                        ]
                    }
                }
            }
        ]
    },
    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,'dist')
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./public/index.html'
        })
    ]
}

5、新建 src 文件夹、public 文件夹

6、执行 npx webpack

打包后得目录

7、noParse 优化，比如安装 jquery

npm add jquery

在scr/index.js中引入jquery

import jquery from 'jquery'

见步骤4的代码

noParse:/jquery/, // 不去解析jquery中的依赖库

20：IgnorePlugin

1、这是webpack内置插件

2、这个插件的作用是：忽略第三方包指定目录，让这些指定目录不要被打包进去

3、参考 blog.csdn.net/qq_17175013…

安装

npm add moment
npm add webpack-dev-server -D

src/index.js

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);

配置

运行

21：

跟着官方网址： www.webpackjs.com/guides/asse…

官方目录=>指南=>管理资源

报错：Webpack Error——TypeError: Cannot read property 'properties' of undefined原因分析及解决方法

blog.csdn.net/weixin_4081…

目录

src/data.xml

<?xml version="1.0" encoding="UTF-8"?>
<note>
  <to>Mary</to>
  <from>John</from>
  <heading>Reminder</heading>
  <body>Call Cindy on Tuesday</body>
</note>

src/index.js

import _, { divide } from 'lodash';
import './style.css';
import Icon from './icon.png';
import Data from './data.xml';

function component() {
    var element = document.createElement('div');
  
    // Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的
    element.innerHTML = _.join(['Hello', 'Hello'], ' ');
    element.classList.add('hello');

    // 将图像添加到我们现有的 div
    var myIcon = new Image();
    myIcon.src = Icon;

    element.appendChild(myIcon);

    console.log(Data);

    return element;
  }
  
  document.body.appendChild(component());

src/style.css

.hello{
    color: red;
    background: url('./icon.png');
}

package.json

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^3.6.0",
    "csv-loader": "^3.0.3",
    "file-loader": "^6.0.0",
    "lodash": "^4.17.5",
    "style-loader": "^1.2.1",
    "webpack": "^4.0.1",
    "webpack-cli": "^3.3.12",
    "xml-loader": "^1.2.1"
  }
}

webpack.config.js

const path = require('path');

module.exports = {
    entry:'./src/index.js',
    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,'dist')
    },
    module: {
        rules:[
            {
                test:/\.css/,
                use:[
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test:/\.(png|svg|jpg|gif)$/,
                use:[
                    'file-loader'
                ]
            },
            {
                test:/\.(csv|tsv)$/,
                use:[
                    'csv-loader'
                ]
            },
            {
                test:/\.xml$/,
                use:[
                    'xml-loader'
                ]
            }
        ]
    }
};

官方目录=>指南=>管理输出

报错：CleanWebpackPlugin is not a constructor blog.csdn.net/qq_36242361…

目录

src/index.js

import _, { divide } from 'lodash';
import printMe from './print.js';


function component() {
    var element = document.createElement('div');
    var btn = document.createElement('button');
  
    // Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的
    element.innerHTML = _.join(['Hello', 'Hello'], ' ');

    btn.innerHTML = 'Click me and check the console!';
    btn.onclick = printMe;

    element.appendChild(btn);

    return element;
  }
  
  document.body.appendChild(component());

src/print.js

export default function printMe(){
    console.log('I get called from print.js!');
}

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    // entry:'./src/index.js',
    entry:{
        app:'./src/index.js',
        print:'./src/print.js'
    },
    plugins:[
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title:'123'
        })
    ],
    output:{
        // filename:'bundle.js',
        filename:'[name].bundle.js',
        path:path.resolve(__dirname,'dist')
    },
};

官方目录=>指南=>开发

webpack4.0 21：3.dllPlugin

优化第三方库，避免每次从新打包

记录看到的

官方目录看到 官方目录=>指南=>开发=>使用观察模式

zhufeng:看到 webpack4.0 第3章: webpack优化21，链接如下

www.javascriptpeixun.cn/course/1445…

avatar
文章
阅读
粉丝