webpack 打包第三方庫_webpack打包第三方類庫

參考

實作方法

方式1

在webpack的入口檔案中直接引入第三方類庫,向外全局暴露，以jquery插件使用為例

配置

1.建立本地項目webpack-demo

mkdir webpack-demo

cd webpack-demo

2.在webpack-demo的根目錄下建立package.json檔案

npm init -y

安裝webpack依賴包

npm i webpack webpack-cli webpack-dev-server --save-dev

子產品說明：

webpack

webpack核心

webpack-cli

webpack的腳手架(啟動器)

webpack-dev-server

開發環境下用于實時加載依賴

4.修改package.json檔案的scripts屬性值,進行打包資源的配置

"scripts": {

"dev": "webpack-dev-server --open --mode development",

"build": "webpack --mode production"

},

5.安裝相關的loader

npm install url-loader --save-dev

6.安裝jquery

npm install jquery -save

7.在入口檔案app.js中引入jquery

import $ from 'jquery'

8.給按鈕綁定事件

$('#btn1').on('click', () => {

alert('welcome!')

})

9.運作指令

npm run dev

10.結果展示

方式2

通過webpack的ProvidePlugin插件全局引入第三方類庫,以echats使用為例

配置

1 ~ 5步同上

6.安裝echarts

npm install echarts --save

7.在webpack.config.js中進行配置

const path = require('path');

// 顯示程序的完成進度

var ProgressBarPlugin = require('progress-bar-webpack-plugin');

// 設定進度字型顔色

const chalk = require('chalk');

// 輸出html

const HtmlWebpackPlugin = require('html-webpack-plugin');

// 分離css代碼

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// 引入webpack

const webpack = require('webpack')

module.exports = {

mode: 'development',

entry: {

app: './src/app.js'

},

output: {

path: path.resolve(__dirname, '../dist'),

filename: '[name].[hash].js'

},

devServer: {

baseContent: path.resolve(__dirname, '../dist'),// 靜态資源根目錄

host: 'localhost',//伺服器IP位址，預設是localhsot

port: 5527,//服務監聽的端口号

compress: true,// 是否開啟服務端壓縮(gzip)

},

module: {

rules: [

{

test: /\.jsx?$/,

use: [

{loader: 'babel-loader'}

]

},

{

test: /\.css$/,

use: [

// {

// loader: 'style-loader',

// options: {

// singleton: true,// 單獨的style

// }

// },

MiniCssExtractPlugin.loader,

{

loader: 'css-loader'

},

{

loader: 'postcss-loader'

}

]

},

{

test: /\.less$/,

use: [

// {

// loader: 'style-loader'

// },

MiniCssExtractPlugin.loader,

{

loader: 'css-loader'

},

{

loader: 'less-loader'

}

]

},

{

test: /\.scss$/,

use: [

// {

// loader: 'style-loader'

// },

MiniCssExtractPlugin.loader,

{

loader: 'css-loader'

},

{

loader: 'postcss-loader'

},

{

loader: 'sass-loader'

}

]

},

{

test: /\.(jpg|png|jpe?g|gif|svg)(\?.*)?$/i,

use: [

{

loader: 'url-loader',

options: {

outputPath: 'images/',// 輸出目錄

name(file) {// 輸出名稱

if(process.env.NODE_ENV === 'development') {

return '[path][name].[ext]'

}

return '[hansh].[ext]'

},

limit: 5*1024

}

}

]

},

{

test: /\.(htm?l)/i,

use: {loader: 'html-withimg-loader'}

},

{

test: /\.(eot|woff2?|ttf|svg)$/,

use: [{

loader: 'url-loader',

options: {

name: '[name]-[hash:5].min.[ext]',

limit: 5000,

publicPath: '../static/fonts/',

outputPath: 'fonts/'

}

}]

}

]

},

plugins: [

new HtmlWebpackPlugin({

title: 'Webpack Study Demo',

filename: 'index.html',//指定生成的HTML檔案名

template: path.join(__dirname, '../public/index.html') // 指定模闆路徑

}),

new ProgressBarPlugin({

format: chalk.green('Progressing') + '[:bar]' + chalk.green(':percent') + '(:elapsed seconds)',

clear: false

}),

new MiniCssExtractPlugin({

filename: '[name].css',// 分離後的檔案名

chunkFilename: '[id].css',//

ignoreOrder: false

}),

new webpack.ProvidePlugin({

$: 'jquery',

echarts: 'echarts'

})

]

}

7.建立echart容器

Webpack Demo

塑造自己的過程很疼，但最終能收獲一個更好的自己

8.初始化echarts

$(function () {

// 基于準備好的dom，初始化echarts執行個體

let myChart = echarts.init(document.getElementById('mycharts'));

let option = {

backgroundColor: '#2c343c',

title: {

text: 'Customized Pie',

left: 'center',

top: 20,

textStyle: {

color: '#ccc'

}

},

tooltip: {

trigger: 'item',

formatter: "{a}

{b} : {c} ({d}%)"

},

visualMap: {

show: false,

min: 80,

max: 600,

inRange: {

colorLightness: [0, 1]

}

},

series: [{

name: '通路來源',

type: 'pie',

radius: '55%',

center: ['50%', '50%'],

data: [{

value: 335,

name: '直接通路'

},

{

value: 310,

name: '郵件營銷'

},

{

value: 274,

name: '聯盟廣告'

},

{

value: 235,

name: '視訊廣告'

},

{

value: 400,

name: '搜尋引擎'

}

].sort(function (a, b) {

return a.value - b.value;

}),

roseType: 'radius',

label: {

normal: {

textStyle: {

color: 'rgba(255, 255, 255, 0.3)'

}

}

},

labelLine: {

normal: {

lineStyle: {

color: 'rgba(255, 255, 255, 0.3)'

},

smooth: 0.2,

length: 10,

length2: 20

}

},

itemStyle: {

normal: {

color: '#c23531',

shadowBlur: 200,

shadowColor: 'rgba(0, 0, 0, 0.5)'

}

},

animationType: 'scale',

animationEasing: 'elasticOut',

animationDelay: function (idx) {

return Math.random() * 200;

}

}]

};

myChart.setOption(option)

});

9.運作指令

npm run dev

10.結果展示