您好,登錄后才能下訂單哦!
webpack 的核心價(jià)值就是前端源碼的打包,即將前端源碼中每一個(gè)文件(無(wú)論任何類型)都當(dāng)做一個(gè) pack ,然后分析依賴,將其最終打包出線上運(yùn)行的代碼。webpack 的四個(gè)核心部分
webpack 如今已經(jīng)進(jìn)入 v4.x 版本,v5.x 估計(jì)也會(huì)很快發(fā)布。不過(guò)看 v5 的變化相比于 v4 ,常用的配置沒(méi)有變,這是一個(gè)好消息,說(shuō)明基本穩(wěn)定。
前端工程師需要了解的 webpack
前端工程化是近幾年前端發(fā)展迅速的主要推手之一,webpack 無(wú)疑是前端工程化的核心工具。目前前端工程化工具還沒(méi)有到一鍵生成,或者重度繼承到某個(gè) IDE 中(雖然有些 cli 工具可以直接創(chuàng)建),還是需要開(kāi)發(fā)人員手動(dòng)做一些配置。
因此,作為前端開(kāi)發(fā)人員,熟練應(yīng)用 webpack 的常用配置、常用優(yōu)化方案是必備的技能 —— 這也正是本文的內(nèi)容。另外,webpack 的實(shí)現(xiàn)原理算是一個(gè)加分項(xiàng),不要求所有開(kāi)發(fā)人員掌握,本文也沒(méi)有涉及。
基礎(chǔ)配置
初始化環(huán)境
npm init -y 初始化 npm 環(huán)境,然后安裝 webpack npm i webpack webpack-cli -D
新建 src 目錄并在其中新建 index.js ,隨便寫點(diǎn) console.log('index js') 。然后根目錄創(chuàng)建 webpack.config.js ,內(nèi)容如下
const path = require('path') module.exports = { // mode 可選 development 或 production ,默認(rèn)為后者 // production 會(huì)默認(rèn)壓縮代碼并進(jìn)行其他優(yōu)化(如 tree shaking) mode: 'development', entry: path.join(__dirname, 'src', 'index'), output: { filename: 'bundle.js', path: path.join(__dirname, 'dist') } }
然后增加 package.json 的 scripts
"scripts": { "build": "webpack" },
然后運(yùn)行 npm run build 即可打包文件到 dist 目錄。
區(qū)分 dev 和 build
使用 webpack 需要兩個(gè)最基本的功能:第一,開(kāi)發(fā)的代碼運(yùn)行一下看看是否有效;第二,開(kāi)發(fā)完畢了將代碼打包出來(lái)。這兩個(gè)操作的需求、配置都是完全不一樣的。例如,運(yùn)行代碼時(shí)不需要壓縮以便 debug ,而打包代碼時(shí)就需要壓縮以減少文件體積。因此,這里我們還是先把兩者分開(kāi),方便接下來(lái)各個(gè)步驟的講解。
首先,安裝 npm i webpack-merge -D
,然后根目錄新建 build 目錄,其中新建如下三個(gè)文件。
// webpack.common.js 公共的配置 const path = require('path') const srcPath = path.join(__dirname, '..', 'src') const distPath = path.join(__dirname, '..', 'dist') module.exports = { entry: path.join(srcPath, 'index') }
// webpack.dev.js 運(yùn)行代碼的配置(該文件暫時(shí)用不到,先創(chuàng)建了,下文會(huì)用到) const path = require('path') const webpackCommonConf = require('./webpack.common.js') const { smart } = require('webpack-merge') const srcPath = path.join(__dirname, '..', 'src') const distPath = path.join(__dirname, '..', 'dist') module.exports = smart(webpackCommonConf, { mode: 'development' })
// webpack.prod.js 打包代碼的配置 const path = require('path') const webpackCommonConf = require('./webpack.common.js') const { smart } = require('webpack-merge') const srcPath = path.join(__dirname, '..', 'src') const distPath = path.join(__dirname, '..', 'dist') module.exports = smart(webpackCommonConf, { mode: 'production', output: { filename: 'bundle.[contentHash:8].js', // 打包代碼時(shí),加上 hash 戳 path: distPath, // publicPath: 'http://cdn.abc.com' // 修改所有靜態(tài)文件 url 的前綴(如 cdn 域名),這里暫時(shí)用不到 } })
修改 package.json 中的 scripts
"scripts": { "build": "webpack --config build/webpack.prod.js" },
重新運(yùn)行 npm run build 即可看到打包出來(lái)的代碼。最后,別忘了將根目錄下的 webpack.config.js 刪除。
這將引發(fā)一個(gè)新的問(wèn)題:js 代碼中將如何判斷是什么環(huán)境呢?需要借助 webpack.DefinedPlugin 插件來(lái)定義全局變量。可以在 webpack.dev.js 和 webpack.prod.js 中做如下配置:
// 引入 webpack const webpack = require('webpack') // 增加 webpack 配置 plugins: [ new webpack.DefinePlugin({ // 注意:此處 webpack.dev.js 中寫 'development' ,webpack.prod.js 中寫 'production' ENV: JSON.stringify('development') })
最后,修改 src/index.js 只需加入一行 console.log(ENV) ,然后重啟 npm run dev 即可看到效果。
JS 模塊化
webpack 默認(rèn)支持 js 各種模塊化,如常見(jiàn)的 commonJS 和 ES6 Module 。但是推薦使用 ES6 Module ,因?yàn)?production 模式下,ES6 Module 會(huì)默認(rèn)觸發(fā) tree shaking ,而 commonJS 則沒(méi)有這個(gè)福利。究其原因,ES6 Module 是靜態(tài)引用,在編譯時(shí)即可確定依賴關(guān)系,而 commonJS 是動(dòng)態(tài)引用。
不過(guò)使用 ES6 Module 時(shí),ES6 的解構(gòu)賦值語(yǔ)法這里有一個(gè)坑,例如 index.js 中有一行 import {fn, name} from './a.js'
,此時(shí) a.js 中有以下幾種寫法,大家要注意!
// 正確寫法一 export function fn() { console.log('fn') }
export const name = 'b' // 正確寫法二 function fn() { console.log('fn') } const name = 'b' export { fn, name }
// 錯(cuò)誤寫法 function fn() { console.log('fn') } export default { fn, name: 'b' }
該現(xiàn)象的具體原因可參考https://www.jb51.net/article/162079.htm 。下文馬上要講解啟動(dòng)本地服務(wù),讀者可以馬上寫一個(gè) demo 自己驗(yàn)證一下這個(gè)現(xiàn)象。
啟動(dòng)本地服務(wù)
上文創(chuàng)建的 webpack.dev.js 一直沒(méi)使用,下面就要用起來(lái)。
使用 html
啟動(dòng)本地服務(wù),肯定需要一個(gè) html 頁(yè)面作為載體,新建一個(gè) src/index.html 并初始化內(nèi)容
<!DOCTYPE html> <html> <head><title>Document</title></head> <body> <p>this is index html</p> </body> </html>
要使用這個(gè) html 文件,還需要安裝 npm i html-webpack-plugin -D ,然后配置 build/webpack.common.js ,因?yàn)闊o(wú)論 dev 還是 prod 都需要打包 html 文件。
plugins: [ new HtmlWebpackPlugin({ template: path.join(srcPath, 'index.html'), filename: 'index.html' }) ]
重新運(yùn)行 npm run build 會(huì)發(fā)現(xiàn)打包出來(lái)了 dist/index.html ,且內(nèi)部已經(jīng)自動(dòng)插入了打包的 js 文件。
webpack-dev-server
有了 html 和 js 文件,就可以啟動(dòng)服務(wù)了。首先安裝 npm i webpack-dev-server -D ,然后打開(kāi) build/webpack.dev.js配置。只有運(yùn)行代碼才需要本地 server ,打包代碼時(shí)不需要。
devServer: { port: 3000, progress: true, // 顯示打包的進(jìn)度條 contentBase: distPath, // 根目錄 open: true, // 自動(dòng)打開(kāi)瀏覽器 compress: true // 啟動(dòng) gzip 壓縮 }
打開(kāi) package.json 修改 scripts ,增加 "dev": "webpack-dev-server --config build/webpack.dev.js", 。然后運(yùn)行 npm run dev ,打開(kāi)瀏覽器訪問(wèn) localhost:3000 即可看到效果。
解決跨域
實(shí)際開(kāi)發(fā)中,server 端提供的端口地址和前端可能不同,導(dǎo)致 ajax 收到跨域限制。使用 webpack-dev-server 可配置代理,解決跨域問(wèn)題。如有需要,在 build/webpack.dev.js 中增加如下配置。
devServer: { // 設(shè)置代理 proxy: { // 將本地 /api/xxx 代理到 localhost:3000/api/xxx '/api': 'http://localhost:3000', // 將本地 /api2/xxx 代理到 localhost:3000/xxx '/api2': { target: 'http://localhost:3000', pathRewrite: { '/api2': '' } } }
處理 ES6
使用 babel
由于現(xiàn)在瀏覽器還不能保證完全支持 ES6 ,將 ES6 編譯為 ES5 ,需要借助 babel 這個(gè)神器。安裝 babel npm i babel-loader @babel/core @babel/preset-env -D ,然后修改 build/webpack.common.js 配置
module: { rules: [ { test: /\.js$/, loader: ['babel-loader'], include: srcPath, exclude: /node_modules/ }, ] },
還要根目錄下新建一個(gè) .babelrc json 文件,內(nèi)容下
{ "presets": ["@babel/preset-env"], "plugins": [] }
在 src/index.js 中加入一行 ES6 代碼,如箭頭函數(shù) const fn = () => { console.log('this is fn') } 。然后重新運(yùn)行 npm run dev,可以看到瀏覽器中加載的 js 中,這個(gè)函數(shù)已經(jīng)被編譯為 function 形式。
使用高級(jí)特性
babel 可以解析 ES6 大部分語(yǔ)法特性,但是無(wú)法解析 class 、靜態(tài)屬性、塊級(jí)作用域,還有很多大于 ES6 版本的語(yǔ)法特性,如裝飾器。因此,想要把日常開(kāi)發(fā)中的 ES6 代碼全部轉(zhuǎn)換為 ES5 ,還需要借助很多 babel 插件。
安裝 npm i @babel/plugin-proposal-class-properties @babel/plugin-transform-block-scoping @babel/plugin-transform-classes -D ,然后配置 .babelrc
{ "presets": ["@babel/preset-env"], "plugins": [ "@babel/plugin-proposal-class-properties", "@babel/plugin-transform-block-scoping", "@babel/plugin-transform-classes" ] }
在 src/index.js 中新增一段 class 代碼,然后重新運(yùn)行 npm run build ,打包出來(lái)的代碼會(huì)將 class 轉(zhuǎn)換為 function 形式。
source map
source map 用于反解析壓縮代碼中錯(cuò)誤的行列信息,dev 時(shí)代碼沒(méi)有壓縮,用不到 source map ,因此要配置 build/webpack.prod.js
// webpack 中 source map 的可選項(xiàng),是情況選擇一種: // devtool: 'source-map' // 1. 生成獨(dú)立的 source map 文件 // devtool: 'eval-source-map' // 2. 同 1 ,但不會(huì)產(chǎn)生獨(dú)立的文件,集成到打包出來(lái)的 js 文件中 // devtool: 'cheap-module-source-map' // 3. 生成單獨(dú)的 source map 文件,但沒(méi)有列信息(因此文件體積較?。?devtool: 'cheap-module-eval-source-map' // 4. 同 3 ,但不會(huì)產(chǎn)生獨(dú)立的文件,集成到打包出來(lái)的 js 文件中
生產(chǎn)環(huán)境下推薦使用 1 或者 3 ,即生成獨(dú)立的 map 文件。修改之后,重新運(yùn)行 npm run build ,會(huì)看到打包出來(lái)了 map 文件。
處理樣式
在 webpack 看來(lái),不僅僅是 js ,其他的文件也是一個(gè)一個(gè)的模塊,通過(guò)相應(yīng)的 loader 進(jìn)行解析并最終產(chǎn)出。
處理 css
安裝必要插件 npm i style-loader css-loader -D ,然后配置 build/webpack.common.js
module: { rules: [ { /* js loader */ }, { test: /\.css$/, loader: ['style-loader', 'css-loader'] // loader 的執(zhí)行順序是:從后往前 } ] },
新建一個(gè) css 文件,然后引入到 src/index.js 中 import './css/index.css' ,重新運(yùn)行 npm run dev 即可看到效果。
處理 less
less sass 都是常用 css 預(yù)處理語(yǔ)言,以 less 為例講解。安裝必要插件 npm i less less-loader -D ,然后配置 build/webpack.common.js
{ test: /\.less$/, loader: ['style-loader', 'css-loader', 'less-loader'] // 增加 'less-loader' ,注意順序 }
新建一個(gè) less 文件,然后引入到 src/index.js 中 import './css/index.less' ,重新運(yùn)行 npm run dev 即可看到效果。
自動(dòng)添加前綴
一些 css3 的語(yǔ)法,例如 transform: rotate(45deg); 為了瀏覽器兼容性需要加一些前綴,如 webkit- ,可以通過(guò) webpack 來(lái)自動(dòng)添加。安裝 npm i postcss-loader autoprefixer -D ,然后配置
{ test: /\.css$/, loader: ['style-loader', 'css-loader', 'postcss-loader'] // 增加 'postcss-loader' , 注意順序 }
還要新建一個(gè) postcss.config.js 文件,內(nèi)容是
module.exports = { plugins: [require('autoprefixer')] }
重新運(yùn)行 npm run dev 即可看到效果,自動(dòng)增加了必要的前綴。
抽離 css 文件
默認(rèn)情況下,webpack 會(huì)將 css 代碼全部寫入到 html 的 <style> 標(biāo)簽中,但是打包代碼時(shí)需要抽離到單獨(dú)的 css 文件中。安裝 npm i mini-css-extract-plugin -D 然后配置 build/webpack.prod.js(打包代碼時(shí)才需要,運(yùn)行時(shí)不需要)
// 引入插件 const MiniCssExtractPlugin = require('mini-css-extract-plugin') // 增加 webpack 配置 module: { rules: [ { test: /\.css$/, loader: [ MiniCssExtractPlugin.loader, // 注意,這里不再用 style-loader 'css-loader', 'postcss-loader' ] } ] }, plugins: [ new MiniCssExtractPlugin({ filename: 'css/main.[contentHash:8].css' }) ]
如需要壓縮 css ,需要安裝 npm i terser-webpack-plugin optimize-css-assets-webpack-plugin -D ,然后增加配置
// 引入插件 const TerserJSPlugin = require('terser-webpack-plugin') const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin') // 增加 webpack 配置 optimization: { minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})], },
運(yùn)行 npm run build 即可看到打包出來(lái)的 css 是獨(dú)立的文件,并且是被壓縮過(guò)的。
處理圖片
要在 js 中 import 圖片,或者在 css 中設(shè)置背景圖片。安裝 npm i file-loader -D 然后配置 build/webpack.common.js
{ test: /\.(png|jpg|gif)$/, use: 'file-loader' }
如果想要處理 html 代碼中 <img src="..."/> 的形式,則安裝 npm i html-withimg-loader -D 然后配置 build/webpack.common.js
{ test: /\.html$/, use: 'html-withimg-loader' }
打包之后,dist 目錄下會(huì)生成一個(gè)類似 917bb63ba2e14fc4aa4170a8a702d9f8.jpg 的文件,并被引入到打包出來(lái)的結(jié)果中。
如果想要將小圖片用 base64 格式產(chǎn)出,則安裝 npm i url-loader -D ,然后配置 build/webpack.common.js
{ test: /\.(png|jpg|gif)$/, use: { loader: 'url-loader', options: { // 小于 5kb 的圖片用 base64 格式產(chǎn)出 // 否則,依然延用 file-loader 的形式,產(chǎn)出 url 格式 limit: 5 * 1024, // 打包到 img 目錄下 outputPath: '/img/', // 設(shè)置圖片的 cdn 地址(也可以統(tǒng)一在外面的 output 中設(shè)置,那將作用于所有靜態(tài)資源) // publicPath: 'http://cdn.abc.com' } } },
多頁(yè)應(yīng)用
src 下有 index.js index.html 和 other.js other.html ,要打包輸出兩個(gè)頁(yè)面,且分別引用各自的 js 文件。
第一,配置輸入輸出
entry: { index: path.join(srcPath, 'index.js'), other: path.join(srcPath, 'other.js') }, output: { filename: '[name].[contentHash:8].js', // [name] 表示 chunk 的名稱,即上面的 index 和 other path: distPath },
第二,配置 html 插件
plugins: [ // 生成 index.html new HtmlWebpackPlugin({ template: path.join(srcPath, 'index.html'), filename: 'index.html', // chunks 表示該頁(yè)面要引用哪些 chunk (即上面的 index 和 other),默認(rèn)全部引用 chunks: ['index'] // 只引用 index.js }), // 生成 other.html new HtmlWebpackPlugin({ template: path.join(srcPath, 'other.html'), filename: 'other.html', chunks: ['other'] // 只引用 other.js }),
抽離公共代碼
公共模塊
多個(gè)頁(yè)面或者入口,如果引用了同一段代碼,如上文的多頁(yè)面例子中,index.js 和 other.js 都引用了 import './common.js' ,則 common.js 應(yīng)該被作為公共模塊打包。webpack v4 開(kāi)始棄用了 commonChunkPlugin 改用 splitChunks ,可修改 build/webpack.prod.js 中的配置
optimization: { // 分割代碼塊 splitChunks: { // 緩存分組 cacheGroups: { // 公共的模塊 common: { chunks: 'initial', minSize: 0, // 公共模塊的大小限制 minChunks: 2 // 公共模塊最少?gòu)?fù)用過(guò)幾次 } } } },
重新運(yùn)行 npm run build ,即可看到有 common 模塊被單獨(dú)打包出來(lái),就是 common.js 的內(nèi)容。
第三方模塊
同理,如果我們的代碼中引用了 jquery lodash 等,也希望將第三方模塊單獨(dú)打包,和自己開(kāi)發(fā)的業(yè)務(wù)代碼分開(kāi)。這樣每次重新上線時(shí),第三方模塊的代碼就可以借助瀏覽器緩存,提高用戶訪問(wèn)網(wǎng)頁(yè)的效率。修改配置文件,增加下面的 vendor: {...} 配置。
optimization: { // 分割代碼塊 splitChunks: { // 緩存分組 cacheGroups: { // 第三方模塊 vendor: { priority: 1, // 權(quán)限更高,優(yōu)先抽離,重要?。。? test: /node_modules/, chunks: 'initial', minSize: 0, // 大小限制 minChunks: 1 // 最少?gòu)?fù)用過(guò)幾次 }, // 公共的模塊 common: { chunks: 'initial', minSize: 0, // 公共模塊的大小限制 minChunks: 2 // 公共模塊最少?gòu)?fù)用過(guò)幾次 } } } },
重啟 npm run build ,即可看到 vendor 模塊被打包出來(lái),里面是 jquery 或者 lodash 等第三方模塊的內(nèi)容。
懶加載
webpack 支持使用 import(...) 語(yǔ)法進(jìn)行資源懶加載。安裝 npm i @babel/plugin-syntax-dynamic-import -D 然后將插件配置到 .babelrc 中。
新建 src/dynamic-data.js 用于測(cè)試,內(nèi)容是 export default { message: 'this is dynamic' } 。然后在 src/index.js 中加入
setTimeout(() => { import('./dynamic-data.js').then(res => { console.log(res.default.message) // 注意這里的 default }) }, 1500)
重新運(yùn)行 npm run dev 刷新頁(yè)面,可以看到 1.5s 之后打印出 this is dynamic 。而且,dynamic-data.js 也是 1.5s 之后被加載進(jìn)瀏覽器的 —— 懶加載,雖然文件名變了。
重新運(yùn)行 npm run build 也可以看到 dynamic-data.js 的內(nèi)容被打包一個(gè)單獨(dú)的文件中。
常見(jiàn)性能優(yōu)化
tree shaking
使用 import 引入,在 production 環(huán)境下,webpack 會(huì)自動(dòng)觸發(fā) tree shaking ,去掉無(wú)用代碼。但是使用 require 引入時(shí),則不會(huì)觸發(fā) tree shaking。這是因?yàn)?require 是動(dòng)態(tài)引入,無(wú)法在編譯時(shí)判斷哪些功能被使用。而 import 是靜態(tài)引入,編譯時(shí)即可判斷依賴關(guān)系。
noParse
不去解析某些 lib 其內(nèi)部的依賴,即確定這些 lib 沒(méi)有其他依賴,提高解析速度??膳渲玫?build/wepback.common.js 中
module: { noParse: /jquery|lodash/, // 不解析 jquery 和 lodash 的內(nèi)部依賴
ignorePlugin
以常用的 moment 為例。安裝 npm i moment -d 并且 import moment from 'moment' 之后,monent 默認(rèn)將所有語(yǔ)言的 js 都加載進(jìn)來(lái),使得打包文件過(guò)大??梢酝ㄟ^(guò) ignorePlugin 插件忽略 locale 下的語(yǔ)言文件,不打包進(jìn)來(lái)。
plugins: [ new webpack.IgnorePlugin(/\.\/locale/, /moment/), // 忽略 moment 下的 /locale 目錄
這樣,使用時(shí)可以手動(dòng)引入中文包,并設(shè)置語(yǔ)言
import moment from 'moment' import 'moment/locale/zh-cn' // 手動(dòng)引入中文語(yǔ)言包 moment.locale('zh-cn') const r = moment().endOf('day').fromNow() console.log(r)
happyPack
多進(jìn)程打包,參考 https://www.npmjs.com/package/happypack 。注意,小項(xiàng)目使用反而會(huì)變慢。只有項(xiàng)目較大,打包出現(xiàn)明顯瓶頸時(shí),才考慮使用 happypack 。
常用插件和配置
ProvidePlugin
如要給所有的 js 模塊直接使用 $ ,不用每次都 import $ from 'jquery' ,可做如下配置
plugins: [ new webpack.ProvidePlugin({ $: 'jquery' }),
externals
如果 jquery 已經(jīng)在 html 中通過(guò) cdn 引用了,無(wú)需再打包,可做如下配置
externals: { jquery: 'jQuery' },
alias
設(shè)置 alias 別名在實(shí)際開(kāi)發(fā)中比較常用,尤其是項(xiàng)目較大,目錄較多時(shí)。可做如下配置
resolve: { alias: { Utilities: path.join(srcPath, 'utilities') } },
在該配置之前,可能需要 import Utility from '../../utilities/utility' 使用。配置之后就可以 import Utility from 'Utilities/utility' 使用,一來(lái)書(shū)寫簡(jiǎn)潔,二來(lái)不用再考慮相對(duì)目錄的層級(jí)關(guān)系。
extensions
如果引用文件時(shí)沒(méi)有寫后綴名,可以通過(guò) extensions 來(lái)匹配。
resolve: { extensions: [".js", ".json"] },
clean-webpack-plugin
由于使用了 contentHash ,每次 build 時(shí)候都可能打包出不同的文件,因此要及時(shí)清理 dist 目錄。安裝 npm i clean-webpack-plugin -D ,然后在 build/webpack.prod.js 中配置
// 引入插件 const CleanWebpackPlugin = require('clean-webpack-plugin') // 增加配置 plugins: [ new CleanWebpackPlugin(), // 默認(rèn)清空 output.path 目錄
copy-webpack-plugin
build 時(shí),將 src 目錄下某個(gè)文件或者文件夾,無(wú)條件的拷貝到 dist 目錄下,例如 src/doc 目錄拷貝過(guò)去。安裝 npm i copy-webpack-plugin -D,然后在 build/webpack.prod.js 中配置
// 引入插件 const CopyWebpackPlugin = require('copy-webpack-plugin') // 增加配置 plugins: [ new CopyWebpackPlugin([ { from: path.join(srcPath, 'doc'), // 將 src/doc 拷貝到 dist/doc to: path.join(distPath, 'doc') } ]),
bannerPlugin
代碼的版權(quán)聲明,在 build/webpack.prod.js 中配置即可。
plugins: [ new webpack.BannerPlugin('by github.com/wangfupeng1988 \r'),
總結(jié)
webpack 發(fā)展至今配置非常多,該視頻中也沒(méi)有全部講解出來(lái),只是一些實(shí)際開(kāi)發(fā)中常用的。其他的配置可以去看官網(wǎng)文檔。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。