1. 提取css成單獨文件

1）創建文件

?

index.js中我們引入css文件

import '../css/a.css'; import '../css/b.css';

2）下載plugin包

npm install --save-dev mini-css-extract-plugin

3）修改配置文件

const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); ? module.exports = {entry: './src/js/index.js',output: {filename: 'js/built.js',path: resolve(__dirname, 'build')},module: {rules: [{test: /\.css$/,use: [// 創建style標簽，將樣式放入// 'style-loader', // 這個loader取代style-loader。作用：提取js中的css成單獨文件MiniCssExtractPlugin.loader,// 將css文件整合到js文件中'css-loader']}]},plugins: [new HtmlWebpackPlugin({template: './src/index.html'}),new MiniCssExtractPlugin({// 對輸出的css文件進行重命名filename: 'css/built.css'})],mode: 'development' }; ?

4）運行指令：webpack

?

可以發現，a.css和b.css中的文件合并到了同一個文件built.css中了。

index.html文件自動為我們引入了合并后的css文件

<link href="css/built.css" rel="stylesheet"></head>

2. css兼容性處理

• mini-css-extract-plugin

  作用：從bundle.js中提取css為單獨文件

• postcss-loader

• postcss-preset-env

  postcss-preset-env 作用：幫postcss找到package.json中的browserslist（看下面的解釋）里面的配置，通過配置加載指定的css兼容性樣式

• optimize-css-assets-webpack-plugin 作用：對css進行壓縮處理

1）安裝插件

npm install --save-dev postcss-loader postcss-preset-env

2）設置兼容屬性

我們在package.json中增加如下內容：

分別為開發環境下需要兼容的內容和生產環境下需要兼容的內容。

?"browserslist": {"development": ["last 1 chrome version","last 1 firefox version","last 1 safari version"],"production": [">0.2%","not dead","not op_mini all"]}

具體有什么屬性我們可以查詢文檔：https://github.com/browserslist/browserslist

3）修改配置文件

const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); ? // 設置nodejs環境變量 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', ?// 使用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' };

4）創建css文件

我們的css文件樣式分別為：

a.css

#box1 {width: 100px;height: 100px;background-color: pink;display: flex;backface-visibility: hidden; }

b.css

#box2 {width: 200px;height: 200px;background-color: deeppink; }

5）運行指令：webpack

這里我們在做webpack配置css兼容的時候出現了postcss-loader插件不兼容問題

?

原因是postcss-loader這個版本不支持在webpack。

解決辦法：

在項目根目錄下新建一個postcss.config.js文件

module.exports={plugins:[require('postcss-preset-env')()] }

webpackconfig.js修改如下

? ? ? ? {loader: 'postcss-loader',// options: {// ? ident: 'postcss',// ? plugins: () => [// ? ? // postcss的插件// ? ? require('postcss-preset-env')()// ? ]// }}

修改完成后執行webpack，可以發現打包成功了。

成功后的css文件代碼如下：

#box1 {width: 100px;height: 100px;background-color: pink;display: flex;-webkit-backface-visibility: hidden;backface-visibility: hidden; } #box2 {width: 200px;height: 200px;background-color: deeppink; }

3. 壓縮css

1）安裝插件

npm install --save-dev optimize-css-assets-webpack-plugin

2）修改配置文件

在4.2代碼的基礎上增加配置文件

const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin') ?plugins: [new HtmlWebpackPlugin({template: './src/index.html'}),new MiniCssExtractPlugin({filename: 'css/built.css'}),// 壓縮cssnew OptimizeCssAssetsWebpackPlugin()]

3）運行指令：webpack

以下為壓縮后的效果：

?

4. js語法檢查

在團隊中，我們有時候想要規范團隊的代碼風格，我們可以對js進行語法檢查。

Airbnb 前端編碼規范，該項目是github上很受歡迎的一個開源項目。

github地址：https://github.com/airbnb/javascript

我們接下來用該規范作為我們的語法檢查標準。

在www.npmjs.com中查詢得到：

?

1）安裝插件

npm install --save-dev eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import

2）修改配置文件

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: [/*語法檢查： eslint-loader eslint注意：只檢查自己寫的源代碼，第三方的庫是不用檢查的*/{test: /\.js$/,exclude: /node_modules/,loader: 'eslint-loader',options: {// 自動修復eslint的錯誤fix: true}}]},plugins: [new HtmlWebpackPlugin({template: './src/index.html'})],mode: 'development' }; ?

3）配置package.json

我們需要配置檢查規則

"eslintConfig": {"extends": "airbnb-base" }

4）創建js文件

let count = 1; if (true) {count += 1; } ? const num = 2; // 下一行eslint所有規則都失效（下一行不進行eslint檢查） // eslint-disable-next-line; console.log(count);

5）運行指令：webpack

校驗如下：

?

5. js兼容性處理

1）下載plugin包

npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/polyfill core-js

2）創建文件

index.js

// import '@babel/polyfill'; ? const add = (x, y) => {return x + y; }; console.log(add(2, 5)); ? const promise = new Promise(resolve => {setTimeout(() => {console.log('定時器執行完了~');resolve();}, 1000); }); ? console.log(promise);

3）兼容性處理

基本js兼容性處理 --> @babel/preset-env 問題：只能轉換基本語法，如promise高級語法不能轉換

全部js兼容性處理 --> @babel/polyfill 主需要在index.js加入 import '@babel/polyfill' 就行 問題：我只要解決部分兼容性問題，但是將所有兼容性代碼全部引入，體積太大了~

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

4）基本js兼容處理

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: [{test: /\.js$/,exclude: /node_modules/,loader: 'babel-loader',options: {// 預設：指示babel做怎么樣的兼容性處理presets: ['@babel/preset-env']}}]},plugins: [new HtmlWebpackPlugin({template: './src/index.html'})],mode: 'development' };

5）按需加載

修改上面的文件的options的部分

? ? ? ?options: {// 預設：指示babel做怎么樣的兼容性處理presets: [['@babel/preset-env',{// 按需加載useBuiltIns: 'usage',// 指定core-js版本corejs: {version: 3},// 指定兼容性做到哪個版本瀏覽器targets: {chrome: '60',firefox: '60',ie: '9',safari: '10',edge: '17'}}]]}

6. 壓縮html和js

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')},plugins: [new HtmlWebpackPlugin({template: './src/index.html',// 壓縮html代碼minify: {// 移除空格collapseWhitespace: true,// 移除注釋removeComments: true}})],// 生產環境下會自動壓縮js代碼mode: 'production' };

7.?生產環境基本配置

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環境變量：決定使用browserslist的哪個環境 process.env.NODE_ENV = 'production'; ? // 復用loader const commonCssLoader = [MiniCssExtractPlugin.loader,'css-loader',{// 還需要在package.json中定義browserslistloader: '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處理。當一個文件要被多個loader處理，那么一定要指定loader執行的先后順序：先執行eslint 在執行babel*/{// 在package.json中eslintConfig --> airbnbtest: /\.js$/,exclude: /node_modules/,// 優先執行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' };

?

總結

以上是生活随笔為你收集整理的webpack从入门到精通（三）生产环境的基本配置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。