當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

webpack --- 发布环境的配置代码压缩代码分类

發(fā)布時(shí)間：2023/12/10 编程问答 47 豆豆

生活随笔收集整理的這篇文章主要介紹了 webpack --- 发布环境的配置代码压缩代码分类小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

說明

源代碼
本篇主要對(duì)發(fā)布環(huán)境的配置說明
前面2點(diǎn)是對(duì)webpack的一個(gè)復(fù)習(xí).
第3點(diǎn)開始,逐步配置部署代碼

1. Webpack發(fā)布的策略

2.1 在實(shí)際開發(fā)中,一般會(huì)有兩套方案:

開發(fā)期間的項(xiàng)目:包含了測(cè)試文件、測(cè)試數(shù)據(jù)、開發(fā)工具、測(cè)試工具等相關(guān)配置,有利于項(xiàng)目的開發(fā)和測(cè)試,但是這些文件僅用于開發(fā),發(fā)布項(xiàng)目的時(shí)候需要?jiǎng)h除
部署期間的項(xiàng)目,剔除了那些客戶用不到的測(cè)試數(shù)據(jù)、測(cè)試工具和文件,比較純凈,減少了項(xiàng)目發(fā)布后的體積,有利于開發(fā)和部署

2.2 生產(chǎn)環(huán)境的配置文件

為了滿足我們的發(fā)布策略,需要新建一個(gè)配置文件,命名為webpack.publish.config.js,將webpack.config.js的配置拷貝過去,剔除一些開發(fā)配置項(xiàng)即可.
將devSever節(jié)點(diǎn)刪掉:

devServer: {hot: true,open: true,port: 4321}

將plugins節(jié)點(diǎn)下的熱更新插件刪掉:

new webpack.HotModuleRupluComuntPlugin()

2. Webpack從0開始使用

2.1 項(xiàng)目初始化

注: 使用的node版本是 12.10.0

2.1.1 新建項(xiàng)目(文件夾)webpack-senior

2.1.2 進(jìn)入webpack-senior

新建下面三個(gè):

打包之后的文件夾: dist
項(xiàng)目的源代碼: src
webpack的配置文件: webpack.config.js

2.1.3 初始化項(xiàng)目

npm init -y
使用yarn安裝 jquery: yarn add jquery (等同于 npm i -D jquery)

2.1.4 src的初始化

在其中新建如下文件和內(nèi)容:
src/index.js <html><body><ul><li>這是第1個(gè)li</li><li>這是第2個(gè)li</li><li>這是第3個(gè)li</li><li>這是第4個(gè)li</li></ul></body></html>
- src/main.js
import $ from 'jquery' $(function(){$('li:odd').css('backgroundColor','pink');$('li:even').css('backgroundColor','marron'); })();

2.1.5 配置文件的編寫

上面完成了簡(jiǎn)單的頁面和js對(duì)頁面的操作,下面寫Webpack的配置文件(webpack使用配置文件對(duì)項(xiàng)目進(jìn)行打包構(gòu)建)
webpack.config.js
const path = require('path');module.exports = {entry: path.join(__dirname, './src/main.js'),output: {path: path.join(__dirname, './dist'),filename: 'bundle.js'}}

以上代碼指明了webpack的入口和打包文件,下面需要裝2個(gè)插件來使index.html和main.js在內(nèi)存中生成:

yarn add webpack --dev(webpack是在開發(fā)環(huán)境中進(jìn)行的,因此需要在npm中使用-S,在yarn中則變?yōu)?--dev)

yarn add webpack-dev-server html-webpack-plugin --dev: 安裝在內(nèi)存中生成index.html和main.js的插件,改寫webpack.config.js如下:

const path = require('path');const htmlWebpackPlugin = require('html-webpack-plugin');module.exports = {entry: path.join(__dirname, './src/main.js'),output: {path: path.join(__dirname, './dist'),filename: 'bundle.js'},plugin: [new htmlWebpackPlugin({template: path.join(__dirname, './src/index.html'),filename: 'index.html'})]}

上面已經(jīng)將html頁面放到了內(nèi)存中,接下來配置啟動(dòng)命令:package.json

{"scripts": {"dev": "webpack-dev-server --open --port 3000 hot"}}

2.1.6 小檢測(cè)點(diǎn)

對(duì)上面過程進(jìn)行說明:

從啟動(dòng)命令npm run dev說起
當(dāng)在命令行,輸入 npm run dev時(shí)
工具: webpack-cli(安裝在開發(fā)環(huán)境, yarn add webpack-cli --dev),會(huì)以命令行啟動(dòng)的目錄作為當(dāng)前目錄,去尋找package.json文件
找到package.json文件后,會(huì)尋找"scripts"
找到scripts對(duì)象后,進(jìn)而找到"dev"
然后運(yùn)行命令webpack-dev-server --open --port 3000 --hot
webpack-dev-server:
每次寫完代碼手動(dòng)調(diào)用webpack去打包代碼太麻煩,因此使用 webpack-dev-server來進(jìn)行自動(dòng)打包構(gòu)建
會(huì)根據(jù)package.json中output的配置,生產(chǎn)一個(gè)內(nèi)存中的main.js文件.

2.2 webpack中l(wèi)oader的配置

webpack默認(rèn)只能解析.js和.json文件,若想解析其他類型的文件,需要配置loader

配置loader解析.scss

在src目錄下新建目錄結(jié)構(gòu)/src/css/index.scss

在index.scss中寫入如下:

html, body {margin: 0;padding: 0;ul {list-style: none;padding: 0;margin: 0;}li{font-size:12px;line-height: 30px;padding-left: 10px;}.box {width: 500px;height: 230px;background: url('../images/開心.gif');background-size: cover;} }

在/src/index.html中添加如下:

在main.js中導(dǎo)入index.scss:

import './css/index.scss';

此時(shí)項(xiàng)目肯定啟動(dòng)不了,因?yàn)槲磁渲胠oader的webpack不能解析.scss,下配置:

解析CSS、SCSS、URL加載
安裝依賴: yarn add style-loader css-loader sass-loader node-sass url-loader file-loader --dev

// webpack.config.jsmodule.exports = {module:{rules:[{ test: /\.css$/, use: ['style-loader', 'css-loader'] },{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },{ test: /\.(png|gif|bump|jpg)$/, use: ['url-loader?limit=5000']}]}}

解析ES6的高級(jí)語法
安裝依賴: yarn add babel-core babel-loader babel-plugin-transform-runtime babel-preset-env babel-preset-stage-0 --dev

// webpack.config.jsmodule.exports ={module:{rules:[{ test:/\.js$/, use:'babel-loader', exclude: /node_modules/ }]}}````````js// .babelrc{"presets": ["env", "stage-0"],"plugins": ["transform-runtime"]}

Error: Cannot find module '@babel/core': 查看報(bào)錯(cuò),是因?yàn)閎abel-loader的版本過高,根據(jù)提示輸入yarn add babel-loader@7 --dev即可
Module not found: Error: Can't resolve 'scss-loader' in 'D:\L-rn\HeiMa\webpack-senior':沒有找到scss-loader模塊,打開package.json可以看到,里面有一個(gè)’sass-loader’,將webpack.config.js中的scss改為sass即可.

3. 使用Webpack打包項(xiàng)目

現(xiàn)在假設(shè)項(xiàng)目已經(jīng)開發(fā)完畢,并且打算使用webpack將項(xiàng)目進(jìn)行打包.

3.1 直接在命令行輸入webpack命令進(jìn)行打包

直接打包,生成的項(xiàng)目體積會(huì)很大,許多不需要的內(nèi)容都會(huì)被打包在里面

3.2 優(yōu)化打包

3.2.1 新建一個(gè)打包時(shí)的webpack配置文件:

webpack.pub.config.js

3.2. 2 新建一個(gè)打包指令:

package.json

{"scripts": {"build": "webpack --config webpack.pub.config.js"}}

3.3.3 統(tǒng)一管理打包后的圖片

將打包后的所有圖片放到dist/images中統(tǒng)一管理
改變webpack.pub.config.js

module.exports ={module: {rules:[{ test:/\.(png|gif|bump|jpg)$/, use: ['url-loader?limit=5000&name=images/[hash:8]-[name].[ext]']}]}}

3.3.4 清除之前的打包文件

每次打包都刪除之前的dist文件
安裝插件 yarn add clean-webpack-plugin --dev
配置: webpack.pub.config.js

const { CleanWebpackPlugin } = require('clean-webpack-plugin');module.exports = {plugins: [new CleanWebpackPlugin()]}

TypeError: cleanWebpackPlugin is not a constructor : 規(guī)則配置的時(shí)候出錯(cuò),不需要傳入?yún)?shù)下面是官網(wǎng)原話,拿出組件時(shí),用到了結(jié)構(gòu)賦值.
By default, this plugin will remove all files inside webpack`s output.path directory,as well as all unused webpack assets after every successful rebuild

3.3.5 將自己的代碼和第三方包分離

webpack.pub.config.js

const webpack = require('webpack');const WebpackPlugin = new webpack.optimize.CommonsChunkPlugin({name:'common',filename: 'common.js'});module.exports = {entry: {app: path.join(__dirname, './src/main.js'),common: ['jquery']},plugins:[WebpackPlugin]}

自動(dòng)優(yōu)先加載第三方模塊,在加載自己的代碼.
?

3.3.6 將所有js文件放到j(luò)s文件夾下面

webpack.pub.config.js

const WebpackPlugin = new webpack.optimize.CommonsChunkPlugin({name: 'common',- filename: 'common.js'+ filename: 'js/common.js'});module.exports = {output: {- filename:'[name].js'+ filename:'js/[name].js'}}

3.3.7 壓縮js代碼

// 壓縮JS代碼const UglifyJsPlugin = new webpack.optimize.UgliJsPlugin({compress:{warnings: false}});// 定義生產(chǎn)環(huán)境,進(jìn)一步壓縮代碼const DefinePlugin = new webpack.DefinePlugin({'process.env.NODE_ENV': 'production'});module.exports = {plugins:[UglifyJsPlugin,DefinePlugin]}  

3.3.8 壓縮HTML代碼

webpack.config.js

const HtmlPlugin = new HtmlWebpackPlugin({template: path.join(__dirname, './src/index.html'),filename: 'index.html',minify:{// 合并多余的空格collapseWhitespace: true,// 移除注釋removeComments: true,// 移出屬性上的雙引號(hào)removeAttributeQuotes: true}});

更多minify參數(shù): 官方github
?

3.3.9 將css代碼從js中抽離出來放在同一個(gè)文件夾下

官網(wǎng)
yarn add extract-text-webpack-plugin --dev

const ExtractTextPlugin = require('extract-text-webpack-plugin');module.exports = {module: {rules:[{test: /\.scss$/,use: ExtractTextPlugin.extract({fallback: 'style-loader',use: ['css-loader', 'sass-loader']})}]},plugins: [new ExtractTextPlugin("style.css")]}

報(bào)錯(cuò)Module build failed: CssSyntaxError: 注釋掉css的配置文件如下

module.exports = {module: {rules[// {// test: /\.css$/,// use: ExtractTextPlugin.extract({// fallback: "style-loader",// use: "css-loader"// })// }...]}}

3.3.10 抽離css時(shí)候,圖片路徑問題

我們希望將CSS從js代碼中抽出,單獨(dú)存放在一個(gè)css文件夾下面.
如果css中使用到了url屬性(如{background: url(path)}),在抽離出來后路徑會(huì)發(fā)生變化.
需要在抽離后,自動(dòng)添加路徑如下:

````git {test: /\.scss$/,use: ExtractTextPlugin.extract({fallback: 'style-loader',use: ['css-loader', 'sass-loader'], + publicPath: '../'}) } ````

3.3.11 壓縮css文件

yarn add optimize-css-assets-webpack-plugin --dev

const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');plugins: [new OptimizeCssAssetsPlugin()]

TypeError: Cannot read property 'compilation' of undefined: 版本問題: yarn add optimize-css-assets-webpack-plugin@3.2.0 --dev

4.檢測(cè)點(diǎn)

4.1 webpack是如何提高開發(fā)效率的

從文件中打開.html文件時(shí),首先從磁盤上加載該文件的內(nèi)容到內(nèi)存中,然后在進(jìn)行渲染
磁盤和內(nèi)存的交互,遠(yuǎn)遠(yuǎn)沒有內(nèi)存中直接操作快
html-webpack-plugin : 會(huì)根據(jù)給定的模板文件,生成在內(nèi)存中的主頁
webpack-dev-server : 會(huì)根據(jù)配置,生成一個(gè)在內(nèi)存中的主入口函數(shù)
優(yōu)點(diǎn)是把能在內(nèi)存中操作的部分,都放到內(nèi)存中操作.缺點(diǎn)比較占用內(nèi)存.
在開發(fā)階段,可以很方便的使用第三方庫,在生產(chǎn)階段,可以使用一些插件將第三方庫和源代碼進(jìn)行分離,并壓縮代碼

4.2 yarn和npm的命令行在使用的時(shí)候有什么區(qū)別.

首先理解開發(fā)環(huán)境和生產(chǎn)環(huán)境
開發(fā)環(huán)境: 即開發(fā)過程中使用到的依賴,在npm中常常使用-D來將依賴添加到開發(fā)環(huán)境(“devDependencies”)中
生產(chǎn)環(huán)境: 項(xiàng)目部署到服務(wù)器上所用到的依賴,在npm中常常使用-S來講依賴添加到生產(chǎn)環(huán)境(“dependencies”)中
在yarn中,使用yarn add默認(rèn)將包放在生產(chǎn)環(huán)境中,即對(duì)應(yīng)npm的 -S
若需要添加到開發(fā)環(huán)境中,則需要使用yarn add [packagename] --dev

4.3 webpack中l(wèi)oader和plugins的區(qū)別

原生的webpack只能理解javascript和json文件,如果遇到如.css或.jsx這類的后綴名,是無法解析的,這個(gè)時(shí)候就需要用到loader了,而某些loader無法解析的,就用到plugins.
loader是在開發(fā)過程用到的插件,而plugin貫徹整個(gè)開發(fā)和項(xiàng)目部署

總結(jié)

以上是生活随笔為你收集整理的webpack --- 发布环境的配置代码压缩代码分类的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： php如何将mysql数据库中的admi
下一篇： HFT-CNN:层级多标签分类，让你的模