安科网

【One by one系列】一步步学习webpack打包

hline

hline

2020-02-20

关注 关注

Webpack Quick Start

1.webpack到底是什么？

前端资源加载/打包工具

js→js→png→less→sass

  • 静态分析模块的依赖关系
  • 组织合并打包生成对应的静态资源

2.webpack4新特性

2.1 mode属性

  • development

    • 浏览器调试工具
    • 注释、开发阶段的详细错误日志和提示
    • 快速和优化的增量构建机制

  • production

    • 开启所有的优化代码
    • 更小的bundle大小
    • 去除掉只在开发阶段运行的代码
    • Scope hoisting（作用域）和Tree-shaking（引入但是没有使用，抖掉）

    ? webpack --mode development

2.2 开箱即用webassembly

2.3 支持多种模块类型

  • javascript/auto
  • javascript/esm
  • javascript/dynamic
  • json
  • webassembly/experimental

2.4 0CJS

0配置，webpack4受Parcel打包工具启发，尽可能的让开发者运行项目的成本变低。webpack4不再强制需要webpack.config.js作为打包的入口配置文件，默认的入口为./src/和默认的出口./dist,小项目的福音。

2.5 新的插件系统

提供了针对插件和钩子的新API。

  • 所有的hook由hooks对象统一管理，它将所有的hook作为可扩展的类属性。
  • 当添加插件时，必须提供一个插件名称
  • 开发插件时，可以选择sync/callback/promise作为插件类型
  • 可以通过this.hooks={myHook:new SyncHook(...)}来注册hook了

2.6 node.js>=8.9.4

3.安装

3.1本地安装

cnpm install --save-dev webpack

npm install --save-dev webpack-cli

3.2全局安装

npm install --global webpack

  • 不推荐全局安装 webpack。这会将你项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败。

4.Quick Start

4.1新建文件夹

mkdir webpack-demo

4.2新建文件

index.js

/**
 * es6
 * 写法
 *  
 * */
import { hello } from './hello_module'
hello.sayHello()

/**
 * node.js
 * 写法
 */
// let hello=require('./hello_module')
// hello.sayHello();

hello_module.js

/**
 * es6
 */
 export default{
     sayHello:function () {
         console.log("hello")
     }
 }


/**
 * nodejs
 */
module.exports = {
    sayHello: function () {
        console.log("hello")
    }
}

4.3打包

.\node_modules\.bin\webpack --mode development index.js -o output_test_d.js 5kb

.\node_modules\.bin\webpack --mode production index.js -o output_test_p.js 2kb

5.配置文件

webpack.config.js

const path=require('path')

module.exports={
    entry:'./input.js', //入口文件
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'output.bundle.js'
    }
}
const path=require('path')

module.exports={
    entry:{
        home:'./home.js'
        about:'./about.js'
        other:'./other.js'
    }, //入口文件
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'[name].bundle.js' //name->home or about or other
    },
    mode:"development"
}

$:webpack

6.Loaders

webpack预处理源文件，例如ts->js

  • Files
  • JSON
  • Transpiling
  • Templating
  • Styling
  • Linting&&Testing
  • Frameworks

6.1 url-loader

当文件的大小小于某个指定size时，转成DataURL ，base64，不做雪碧图。

npm install url-loader --save-dev

import img from ‘./image.png‘

//webpack.config.js
module.exports={
    module:{
        rules:[
            test:/\.(png|jpg|gif)$/i,
            use:[{
                loader:'url-loader',
                options:{
                    limit:8192
                }
            }]
        ]
    }
}//当文件是png，jpg，gif时，会使用url-loader来进行处理，文件小于8k时，会把文件以DataUrl的形式存储在文件中

6.2 babel-loader

负责把es6，es7的代码转化为es5的代码

  • 安装

npm install -D babel-loader @babel/core @babel/preset-env webpack

moudule:{
    rules:[
        {
            test:/\.m?js$,
            exclude:/(node_modules|bower_components),
            use:{
                loader:'babel-loader',
                options:{
                    presets:['@babel/preset-env']
                }
            }
        }
    ]
}

6.3 sass-loader

npm install sass-loader node-sass -D

npm install style-loader css-loader --save-dev

//webpack.config.js
module.exports={
    ..
    module:{
        rules:[{
            test:/\.scss$/,
            use:[
                "style-loader",
                "css-loader",
                "sass-loader"
            ]
        }]
    }
}

7. Plugins插件

7.1 MinCssExtractPlugin.loader

css合并到一起

  • 安装

npm install mini-css-extract-plugin -D

const MiniCssExtractPlugin=require("min-css-extract-plugin");

module.exports={
    entry:{
        home:'./home.js'
        about:'./about.js'
        other:'./other.js'
    }, //入口文件
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'[name].bundle.js' //name->home or about or other
    },
    mode:"development",
    plugins:[
        new MiniCssExtractPlugin({
            filename:"[name].css",//name->home
            chunkFilename:"[id].css"
        })
    ],
    module:{
        rules:[{
            test:/\.scss$/,
            use:[
                MinCssExtractPlugin.loader,
                "css-loader",
                "sass-loader"
            ]
        }]
    }
}

7.2 DefinePlugin

const path=require('path');
const MiniCssExtractPlugin=require("min-css-extract-plugin");
const webpack=require('webpack')

module.exports={
    entry:{
        home:'./home.js'
        about:'./about.js'
        other:'./other.js'
    }, //入口文件
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'[name].bundle.js' //name->home or about or other
    },
    mode:"development",
    plugins:[
        new MiniCssExtractPlugin({
            filename:"[name].css",//name->home
            chunkFilename:"[id].css"
        }),
        new webpack.DefinePlugin({      'SERVICE_URL':JSON.stringify('http://www.sina.com')
        })//就可以直接在js文件中使用SERVICE_URL中使用
    ],
    module:{
        rules:[{
            test:/\.scss$/,
            use:[
                MinCssExtractPlugin.loader,
                "css-loader",
                "sass-loader"
            ]
        }]
    }
}

7.3 HtmlWebpackPlugin

  • 安装

npm install --save-dev html-webpack-plugin

npm install html-webpack-plugin -D

const path=require('path');
const MiniCssExtractPlugin=require("min-css-extract-plugin");
const webpack=require('webpack');
const HtmlWebpackPlugin=require('html-webpack-plugin');

module.exports={
    entry:{
        home:'./home.js'
        about:'./about.js'
        other:'./other.js'
    }, //入口文件
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'[name].bundle.js' //name->home or about or other
    },
    mode:"development",
    plugins:[
        new MiniCssExtractPlugin({
            filename:"[name].css",//name->home
            chunkFilename:"[id].css"
        }),
        new webpack.DefinePlugin({      'SERVICE_URL':JSON.stringify('http://www.sina.com')
        }),//就可以直接在js文件中使用SERVICE_URL中使用
        new HtmlWebpackPlugin()
    ],
    module:{
        rules:[{
            test:/\.scss$/,
            use:[
                MinCssExtractPlugin.loader,
                "css-loader",
                "sass-loader"
            ]
        }]
    }
}

8.热替换-自动刷新

安装

npm install webpack-dev-server -D

const path=require('path');
const MiniCssExtractPlugin=require("min-css-extract-plugin");
const webpack=require('webpack');
const HtmlWebpackPlugin=require('html-webpack-plugin');

module.exports={
    entry:{
        home:'./home.js'
        about:'./about.js'
        other:'./other.js'
    }, //入口文件
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'[name].bundle.js' //name->home or about or other
    },
    devServer:{
        contentBase:path.join(__dirname,'dist'),
        compress:true,
        port:8080
    },
    mode:"development",
    plugins:[
        new MiniCssExtractPlugin({
            filename:"[name].css",//name->home
            chunkFilename:"[id].css"
        }),
        new webpack.DefinePlugin({      'SERVICE_URL':JSON.stringify('http://www.sina.com')
        }),//就可以直接在js文件中使用SERVICE_URL中使用
        new HtmlWebpackPlugin()
    ],
    module:{
        rules:[{
            test:/\.scss$/,
            use:[
                MinCssExtractPlugin.loader,
                "css-loader",
                "sass-loader"
            ]
        }]
    }
}
{
  "scripts": {
    "start": "webpack-dev-server"//会去node_modules寻找
  },
  "devDependencies": {
    "webpack": "^4.41.6",
    "webpack-cli": "^3.3.11"
  }
}

热启动：npm run start

webpack

hline

hline

0 关注 0 粉丝 0 动态

关注 关注

相关推荐

带你使用webpack快速构建web项目的方法

使用webpack构建web项目以及热部署插件的使用，按以下步骤，能帮助你快速构建和理解~详细学习还得靠官方文档！你得先安装了Node.js此处不赘述。使用此插件我们将会自动在打包的时候创建index.html，且无须关心bundle.js的文件路径。打包

不知道该写啥QAQ 2020-11-12

Webpack的Loader和Plugin的区别

用于对模块源码的转换，loader描述了webpack如何处理非javascript模块，并且在buld中引入这些依赖。loader可以将文件从不同的语言转换为JavaScript，或者将内联图像转换为data URL。module.rules可以指定多个

webfullStack 2020-11-09

vscode 调试 node.js的方法步骤

作为前端工程师经常打交道的开发工具无非 IDE 编辑器 和 Chrome，在 Chrome 中调试是非常方便的，直接在 开发者工具的 source 栏打断点就可以了。那么，如果遇到需要写 node 相关的代码，比如 webpack 配置项，应该怎么调试来实

Yvettre 2020-09-15

如何用5分钟开发一个 Webpack Loader？

今天分享的内容是如何开发一个简单的Webpack Loader，希望通过这个过程能够让你 Get 到 Webpack Loader 的工作原理与机制。这里我的需求是开发一个可以加载 markdown 文件的加载器，以便可以在代码中直接导入 md 文件。我们

想做大牛的蜗牛 2020-10-30

为 Vue 的惰性加载加一个进度条

通常用 Vue.js 编写单页应用时，当加载页面时，所有必需的资源都会被一起加载。在处理大文件时，这可能会导致用户体验不佳。借助 Webpack，可以用 import() 函数而不是 import 关键字在 Vue.js 中按需加载页面。Vue.js 中

gloria0 2020-10-26

详解webpack的文件监听实现(热更新)

文件监听是在源码发生变化时，自动重新构建出新的输出文件。"test": "echo \"Error: no test specified\" && exit 1",

gaojie0 2020-09-11

Runoob-ES6：ES6 环境搭建

目前各大浏览器基本上都支持 ES6 的新特性，其中 Chrome 和 Firefox 浏览器对 ES6 新特性最友好，IE7~11 基本不支持 ES6。Node.js 是运行在服务端的 JavaScript，它对 ES6 的支持度更高。如果你还不了解 No

SelinaChan 2020-08-14

配置webpack

在全局安装webpack: npm install webpack -g. 在项目的根目录创建一个 webpack.config.js. // entry: 打包的入口文件，一个字符串或者一个对象。// output: 配置打包的结果，一个对象。// f

不知道该写啥QAQ 2020-08-09

vue—cli脚手架

使用npm全局安装webpack，打开命令行工具输入：npm install webpack -g或者，安装完成之后输入 webpack -v，如下图，如果出现相应的版本号，则说明安装成功。注意：webpack 4.X 开始，需要安装 webpack-cl

gloria0 2020-08-09

Webpack 原理浅析

Webpack迭代到4.x版本后，其源码已经十分庞大，对各种开发场景进行了高度抽象，阅读成本也愈发昂贵。但是为了了解其内部的工作原理，让我们尝试从一个最简单的 webpack 配置入手，从工具设计者的角度开发一款低配版的Webpack。假设某一天，我们接到

不知道该写啥QAQ 2020-08-02

第一个Vue页面

安装完后，打开cmd命令行界面。安装yarn(fackbook依赖管理工具与Npm功能一样，推荐使用！！！--- 是否安装vue路由 -->. --- 是否启动ESLint代码检测 -->. --- 是否设置单元测试 -->. --- 是

hline 2020-07-29

webpack之常用plugin的配置和使用

html-webpack-plugin插件默认会创建一个HTML模板，并自动引入打包生成的几个主要的chunk包

SelinaChan 2020-07-28

【webpack】webpack打包之后调试源码

注释掉的UglifyJsPlugin用于js打包、压缩、混淆

yqoxygen 2020-07-28

ABAP, UI5和webpack的处理入口

如果一个UI5应用配置到portal的Fiori Launchpad里,那么应用的入口是Component.js. 另一种方式不需要launchpad，只需要在一个standalone的html里自己新建一个component的运行环境:. 那么只需要关注

wangdianyong 2020-07-23

ABAP, Maven, CF App和Webpack的build

命令行mvn clean install后，生成的jar文件默认位于target folder下。在包含了这个yaml文件的folder里使用cf push，因为里面指定了java_buildpack作为buildpack，应用upload到cloud f

webpackvuees 2020-07-23

vue.js 安装

由于 npm 安装速度慢，本教程使用了淘宝的镜像及其命令 cnpm，安装使用介绍参照：使用淘宝 NPM 镜像。Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。This will install Vue 2.x version of the

yqoxygen 2020-07-20

基于vue-cli搭建vue项目开发环境

vue-cli是vue的脚手架工具，用于快速搭建vue项目。让开发者只关心项目本身，而不去关注项目的开发环境。在安装vue-cli之前，我们先安装webpack，在命令行工具输入下面代码。，这里就默认你安装node.js. webpack-simple

不知道该写啥QAQ 2020-07-18

06、Webpack使用loader配置css文件、图片文件、

loader 让 webpack 能够去处理那些非 JavaScript 文件。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。本质上，webpack loader

waterv 2020-07-18

Ant-design中使用jQuery

‘window.jQuery‘: ‘jquery‘,上面代码使用了 webpack 的 ProvidePlugin 插件，这个插件在加载某个模块时，如果遇到了未定义的并且在配置文件中配置了的变量，比如上面代码看到的 $、jquery、jQuery、wind

81463166 2020-07-17

如何科学修改node_modules里的文件

有时候使用npm上的包，发现有bug，我们知道如何修改，但是别人可能一时半会没法更新，或者是我们特殊需求，别人不愿意修改，这时候我们只能自己动手丰衣足食。那么我们应该如何修改别人的源码呢？首先，直接修改node_modules里面的文件是不太行的，重新安装

yqoxygen 2020-07-16
hline

hline

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号