如何使用webpack打包JS

2021-09-13 16:05:34 字數 918 閱讀 1972

我們在命令列中輸入:webpack -h看看webpack的命令列大全

usage: webpack-cli [options]

webpack-cli [options] --entry --output webpack-cli [options] --output

webpack告訴我們,用webpack進行打包有三種方法:

1.新建為webpack.config.js命名的檔案,可以直接webpack命令打包
// sum.js

export default function sum(a, b)

// es6 module規範

import sum from './sum'

// 呼叫

console.log('sum(23,24) = ', sum(23, 24));

hash: 7e137d767d2665688484

version: webpack 4.5.0

time: 588ms

built at: 2018-6-20 20:30:06

asset size chunks chunk names

0.bundle.js 188 bytes 0 [emitted]

bundle.js 1.84 kib 1 [emitted] main

entrypoint main = bundle.js

| ./sum.js 55 bytes [built]

[1] ./minus.js 54 bytes [built]

[2] ./muti.js 114 bytes [built]

webpack進行js打包,引入js

node中html引入jquery可以用webpack進行打包。webpack 3可以打包,webpack 4 打包需要安裝webpack cli,否則會報錯。直接引入js會報錯。語法錯誤,瀏覽器不支援es6語法 uncaught syntaxerror cannot use import stat...

webpack打包js除錯配置

webpack打包js除錯配置 webpack打包js 會將很多的js檔案打包到乙個檔案中,當出現錯誤時,如何在瀏覽器控制台,找到出錯的位置呢?接著之前的來看,首先故意將print.js列印寫錯 執行webpack,由於我修改了package.js 現在需要執行 執行結果同 現在檢視控制台 發現報錯...

webpack打包快取 webpack打包效能分析

webpack提供的uglifyjs外掛程式由於採用單執行緒壓縮,速度很慢 webpack parallel uglify plugin外掛程式可以並行執行uglifyjs外掛程式,這可以有效減少構建時間,當然,該外掛程式應用於生產環境而非開發環境,配置如下 var paralleluglifypl...