當(dāng)前位置：首頁 > news >正文

黨建網(wǎng)站安全建設(shè)alexa全球網(wǎng)站排名分析

news 2025/7/14 14:03:30

黨建網(wǎng)站安全建設(shè),alexa全球網(wǎng)站排名分析,html個人網(wǎng)站設(shè)計,電子商務(wù)網(wǎng)站建設(shè)試卷與答案3 webpack生產(chǎn)環(huán)境配置由于筆記文檔沒有按照之前的md格式書寫，所以排版上代碼上存在問題😢😢😢😢 09 提取css成單獨文件使用下載插件 npm i mini-css-extract-plugin0.9.0 -D webpack配置此時a,b提取成單獨文件,并且…

3 webpack生產(chǎn)環(huán)境配置

由于筆記文檔沒有按照之前的md格式書寫，所以排版上代碼上存在問題😢😢😢😢

09 提取css成單獨文件

使用下載插件 npm i mini-css-extract-plugin@0.9.0 -D

webpack配置

此時a,b提取成單獨文件,并且頁面顯示正確

10 css兼容性處理

使用下載插件 ?npm i postcss-loader@3.0.0 postcss-preset-env@6.7.0 -D

寫相應(yīng)的配置

源代碼：

JavaScript
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// 設(shè)置nodejs環(huán)境變量
// process.env.NODE_ENV = 'development';

module.exports = {
? entry: './src/js/index.js',
? output: {
??? filename: 'js/built.js',
??? path: resolve(__dirname, 'build')
? },
? module: {
??? rules: [
????? {
??????? test: /\.css$/,
??????? use: [
????????? MiniCssExtractPlugin.loader,
????????? 'css-loader',
????????? /*
??????????? css兼容性處理：postcss --> postcss-loader postcss-preset-env

??????????? 幫postcss找到package.json中browserslist里面的配置，通過配置加載指定的css兼容性樣式

??????????? "browserslist": {
????????????? // 開發(fā)環(huán)境 --> 設(shè)置node環(huán)境變量：process.env.NODE_ENV = development
????????????? "development": [
??????????????? "last 1 chrome version",
??????????????? "last 1 firefox version",
??????????????? "last 1 safari version"
????????????? ],
????????????? // 生產(chǎn)環(huán)境：默認(rèn)是看生產(chǎn)環(huán)境
????????????? "production": [
??????????????? ">0.2%",
??????????????? "not dead",
??????????????? "not op_mini all"
????????????? ]
??????????? }
????????? */
????????? // 使用loader的默認(rèn)配置
????????? // 'postcss-loader',
????????? // 修改loader的配置
????????? {
??????????? loader: 'postcss-loader',
??????????? options: {
????????????? ident: 'postcss',
????????????? plugins: () => [
??????????????? // postcss的插件
?????? ?????????require('postcss-preset-env')()
????????????? ]
??????????? }
????????? }
??????? ]
????? }
??? ]
? },
? plugins: [
??? new HtmlWebpackPlugin({
????? template: './src/index.html'
??? }),
??? new MiniCssExtractPlugin({
????? filename: 'css/built.css'
??? })
? ],
? mode: 'development'
};
?

需要在package.json配置

11 壓縮css

配置中，要么用loader，要么用插件，loader做事一遍比較少，更多的用插件

兼容性一般靠loader，壓縮靠插件

下載插件? npm i optimize-css-assets-webpack-plugin@5.0.3 -D

webpack配置

打包 npx webpack

可以看到build/css/build.css代碼壓縮成一行

壓縮css插件?? optimize-css-assets-webpack-plugin

壓縮讓文件體積變小，請求速度就會越快，加載速度就快，用戶看到效果就越快，用戶體驗就會更好，

代碼上線之前就一定要壓縮

12 js語法檢查

需要將airbnb/javascript 這個規(guī)則用到eslint

下載使用到的插件

?npm i eslint@6.8.0 eslint-loader@3.0.3 eslint-plugin-import@2.20.1 eslint-config-airbnb-base@14.0.0 -D

webpack配置

其中需要到package.json里面配置

打包之后效果

js語法檢查

語法檢查： eslint-loader? eslint
????????? 注意：只檢查自己寫的源代碼，第三方的庫是不用檢查的

設(shè)置檢查規(guī)則：
??????????? package.json中eslintConfig中設(shè)置~
????????????? "eslintConfig": {
??????????????? "extends": "airbnb-base"
????????????? }
??????????? airbnb --> eslint-config-airbnb-base? eslint-plugin-import eslint

13 js兼容性處理

下載插件?? npm i babel-loader@8.0.6 @babel/preset-env@7.8.4 @babel/core@7.8.4 -D

webpack配置

但是只能轉(zhuǎn)換基本語法，promise就不能，需要全部兼容性處理

下載?? npm i @babel/polyfill@7.8.3 -D

從Babel 7.4.0開始，這個包已經(jīng)被廢棄了，取而代之的是直接包含core-js/stable

我只要解決部分兼容性問題，但是將所有兼容性代碼全部引入，體積太大了

需要做兼容性處理的就做：按需加載?? core.js

下載 npm i core-js@3.6.4 -D

最終webpack配置

JavaScript
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
? entry: './src/js/index.js',
? output: {
??? filename: 'js/built.js',
??? path: resolve(__dirname, 'build')
? },
? module: {
??? rules: [
????? /*
??????? js兼容性處理：babel-loader @babel/core
????????? 1. 基本js兼容性處理 --> @babel/preset-env
???????? ???問題：只能轉(zhuǎn)換基本語法，如promise高級語法不能轉(zhuǎn)換
????????? 2. 全部js兼容性處理 --> @babel/polyfill?
??????????? 問題：我只要解決部分兼容性問題，但是將所有兼容性代碼全部引入，體積太大了~
????????? 3. 需要做兼容性處理的就做：按需加載? --> core-js
????? */?
????? {
??????? test: /\.js$/,
??????? exclude: /node_modules/,
??????? loader: 'babel-loader',
??????? options: {
????????? // 預(yù)設(shè)：指示babel做怎么樣的兼容性處理
????????? presets: [
??????????? [
????????????? '@babel/preset-env',
????????????? {
??????????????? // 按需加載
??????????????? useBuiltIns: 'usage',
??????????????? // 指定core-js版本
?? ?????????????corejs: {
????????????????? version: 3
??????????????? },
??????????????? // 指定兼容性做到哪個版本瀏覽器
??????????????? targets: {
????????????????? chrome: '60',
????????????????? firefox: '60',
????????????????? ie: '9',
????????????????? safari: '10',
????????????????? edge: '17'
??????????????? }
????????????? }
??????????? ]
????????? ]
??????? }
????? }
??? ]
? },
? plugins: [
??? new HtmlWebpackPlugin({
????? template: './src/index.html'
??? })
? ],
? mode: 'development'
};
?

js兼容性處理：babel-loader @babel/core

????????? 1. 基本js兼容性處理 --> @babel/preset-env

??????????? 問題：只能轉(zhuǎn)換基本語法，如promise高級語法不能轉(zhuǎn)換

????????? 2. 全部js兼容性處理 --> @babel/polyfill??? ----不用寫配置，直接在入口文件里面引入即可 import '@babel/polyfill';

??????????? 問題：我只要解決部分兼容性問題，但是將所有兼容性代碼全部引入，體積太大了~

????????? 3. 需要做兼容性處理的就做：按需加載? --> core-js

一般最終都是通過第一步和第三步一起完成的

14 壓縮? js

只需要將development調(diào)成production即可，生產(chǎn)環(huán)境下會自動壓縮js代碼，production里面的UglifyJsPlugin插件會自動去壓縮js，內(nèi)部都實現(xiàn)好了

15 壓縮? html

在HtmlWebpackPlugin里加一個選項minify

16 生產(chǎn)環(huán)境基本配置

JavaScript
const { resolve } = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 定義nodejs環(huán)境變量：決定使用browserslist的哪個環(huán)境
process.env.NODE_ENV = 'production';

// 復(fù)用loader
const commonCssLoader = [
? MiniCssExtractPlugin.loader,
? 'css-loader',
? {
??? // 還需要在package.json中定義browserslist
??? loader: 'postcss-loader',
??? options: {
????? ident: 'postcss',
????? plugins: () => [require('postcss-preset-env')()]
??? }
? }
];

module.exports = {
? entry: './src/js/index.js',
? output: {
??? filename: 'js/built.js',
??? path: resolve(__dirname, 'build')
? },
? module: {
??? rules: [
????? {
??????? test: /\.css$/,
??????? use: [...commonCssLoader]
????? },
????? {
??????? test: /\.less$/,
??????? use: [...commonCssLoader, 'less-loader']
????? },
????? /*
??????? 正常來講，一個文件只能被一個loader處理。
??????? 當(dāng)一個文件要被多個loader處理，那么一定要指定loader執(zhí)行的先后順序：
????????? 先執(zhí)行eslint 在執(zhí)行babel
????? */
????? {
??????? // 在package.json中eslintConfig --> airbnb
??????? test: /\.js$/,
??????? exclude: /node_modules/,
??????? // 優(yōu)先執(zhí)行
??????? enforce: 'pre',
??????? loader: 'eslint-loader',
??????? options: {
????????? fix: true
??????? }
????? },
??? ??{
??????? test: /\.js$/,
??????? exclude: /node_modules/,
??????? loader: 'babel-loader',
??????? options: {
????????? presets: [
??????????? [
????????????? '@babel/preset-env',
????????????? {
??????????????? useBuiltIns: 'usage',
??????????????? corejs: {version: 3},
??????????????? targets: {
????????????????? chrome: '60',
????????????????? firefox: '50'
??????????????? }
????????????? }
??????????? ]
????????? ]
??????? }
????? },
????? {
??????? test: /\.(jpg|png|gif)/,
??????? loader: 'url-loader',
??????? options: {
????????? limit: 8 * 1024,
????????? name: '[hash:10].[ext]',
????????? outputPath: 'imgs',
????????? esModule: false
??????? }
????? },
????? {
??????? test: /\.html$/,
??????? loader: 'html-loader'
????? },
????? {
??????? exclude: /\.(js|css|less|html|jpg|png|gif)/,
??????? loader: 'file-loader',
??????? options: {
????????? outputPath: 'media'
??????? }
????? }
??? ]
? },
? plugins: [
??? new MiniCssExtractPlugin({
????? filename: 'css/built.css'
??? }),
??? new OptimizeCssAssetsWebpackPlugin(),
??? new HtmlWebpackPlugin({
????? template: './src/index.html',
????? minify: {
??????? collapseWhitespace: true,
??????? removeComments: true
????? }
??? })
? ],
? mode: 'production'
};
?

查看全文

http://www.risenshineclean.com/news/63971.html

中文亚洲精品无码_熟女乱子伦免费_人人超碰人人爱国产_亚洲熟妇女综合网