webpack5 基本配置

這篇文件主要介紹以下基本配置：

  1. 拆分不同環(huán)境的配置文件：webpack-merge
  2. 自動生成模板文件: html-webpack-plugin
  3. 自動刪除以前的打包文件：clean-webpack-plugin
  4. 定義全局變量：
    • 使用cross-env設(shè)置命令行參數(shù)，并在配置文件中獲取process.env.xxx陌选，這個只能在腳本配置文件中獲取
    • 使用webpack.DefinePlugin設(shè)置模塊中可以使用的全局變量公般，注意要使用JSON.stringify封裝變量
  5. 開發(fā)環(huán)境跨域設(shè)置：devServer.proxy中設(shè)置代理
  6. 樣式資源導(dǎo)入處理
    • css：css-loader, style-loader
    • less：less-loader
    • 增加瀏覽器兼容前綴：postcss-loader和autoprefixer插件結(jié)合使用
    • 抽離css文件：mini-css-extract-plugin的loader和插件
  7. 圖片資源導(dǎo)入處理
    • file-loader：將資源文件抽離出來埃篓，打包到指定位置
    • url-loader：同file-loader匕争，但url-loader增加文件大小閾值葵擎，小于閾值使用base64導(dǎo)入
  8. 將es6轉(zhuǎn)換成es5：babel-loader

創(chuàng)建demo

  1. 創(chuàng)建項(xiàng)目
mkdir webpack-demo
cd webpack-demo
npm init -y
npm i webpack webpack-cli -D

可以看到package.json中webpack 和 webpack-cli的版本胳蛮，現(xiàn)在最新的已經(jīng)是webpack5了

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.40.0",
    "webpack-cli": "^4.7.2"
  }
}
  1. 創(chuàng)建基本目錄
  • src：資源目錄右核，隨便創(chuàng)建一個文件index.js慧脱，作為文件入口
// index.js
function hello() {
  console.log('hello')
}
hello()  // 注意要調(diào)用這個函數(shù)，不然會被默認(rèn)tree-shaking掉
  • dist：創(chuàng)建打包輸出目錄
  • webpack.config.js：webpack默認(rèn)的基本配置文件
const path = require('path')

module.exports = {
  entry: path.join(__dirname, 'src', 'index.js'), // 單文件入口
  output: {
    filename: 'bundle.js',  // 輸出文件名
    path: path.join(__dirname, 'dist')  // 輸出目錄
  }
}
  • 改下package.json腳本命令
"scripts": {
    "build": "webpack"
  },
  1. 啟動打包：npm run build
    會在dist/bundle.js打包出以下結(jié)果贺喝，可以看出來webpack5的tree-shaking已經(jīng)非常強(qiáng)大菱鸥，無用的代碼不再被保留
console.log("hello");

區(qū)分 開發(fā)環(huán)境dev 和 生產(chǎn)環(huán)境prod

在大項(xiàng)目中近尚，我們往往需要根據(jù)不同的環(huán)境來進(jìn)行不同的配置挎塌，所以需要拆分webpack配置文件

  1. 創(chuàng)建一個config目錄，用來區(qū)分不同環(huán)境的配置文件：
    • webpack.common.js：用來配置公共的webpack配置
    • webpack.dev.js：用來配置開發(fā)環(huán)境專有的webpack配置
    • webpack.prod.js：用來配置生產(chǎn)環(huán)境專有的webpack配置
  2. 在不同環(huán)境的配置文件中督勺，使用webpack-merge中的merge來合并公共的webpack配置文件(webpack4中是通過smart來合并的)
    npm i webpack-merge -D 
// webpack.common.js 公共的配置
const path = require('path')
const srcPath = path.join(__dirname, '..', 'src')

module.exports = {
  entry: path.join(srcPath, 'index')
}


// webpack.dev.js
const path = require('path')
const commonConfig = require('./webpack.common')
const {merge} = require('webpack-merge')
const devConfig = {
  mode: 'development', // 開發(fā)環(huán)境
  output: {
    filename: 'bundle.js',  // 輸出文件名
    path: path.join(__dirname, '..', 'dist')  // 輸出目錄
  }
}
module.exports = merge(commonConfig, devConfig)


// webpack.prod.js

const path = require('path')
const commonConfig = require('./webpack.common.js')
const {merge} = require('webpack-merge')

const prodConfig = {
  mode: 'production', // 生產(chǎn)環(huán)境
  output: {
    filename: 'bundle.[chunkhash].js',  // 輸出文件名挠他，一般要加上hash
    path: path.join(__dirname, '..', 'dist')  // 輸出目錄
  }
}

module.exports = merge(commonConfig, prodConfig)
  1. 在package.json腳本中區(qū)分不同環(huán)境的啟動命令
    先要安裝：npm install webpack-dev-server -D
    PS：在webpack4中開發(fā)環(huán)境使用的命令是webpack-dev-server --config config/webpack.dev.js扳抽，在webpack5后，改成了webpack server 
"scripts": {
    "build": "webpack --config config/webpack.prod.js",
    "dev": "webpack server --config config/webpack.dev.js"
  },
  1. 運(yùn)行npm run build殖侵，打包
// dist/bundle.004799ddc36231aeaad8.js
console.log("hello");

html-webpack-plugin 自動創(chuàng)建index.html文件

打包的js文件贸呢，需要我們有一個載體來查看結(jié)果，也就是我們一般說的模板文件index.html

  • 手動創(chuàng)建一個index.html（根目錄）文件
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="./dist/bundle.004799ddc36231aeaad8.js"></script>
</body>
</html>

使用瀏覽器打開拢军，可以看到正常輸出的結(jié)果


dev

這個載體文件楞陷，不單單是開發(fā)環(huán)境需要，生產(chǎn)環(huán)境也是需要的茉唉，但是生產(chǎn)環(huán)境我們往往會生成不同的hash值來防止資源緩存固蛾，所以每次生成的文件名都是不同的，手動引入入口文件往往不太現(xiàn)實(shí)度陆，所以需要借助html-webpack-plugin插件來自動生成項(xiàng)目中的html頁面艾凯，并實(shí)現(xiàn)自動導(dǎo)入對應(yīng)腳本

  • html-webpack-plugin 自動創(chuàng)建index.html文件
  1. 安裝: npm i html-webpack-plugin -D
  2. 在plugins中使用，因?yàn)槭枪玫亩詫懺?code>webpack.common.js配置文件中：
// webpack.common.js 公共的配置
const path = require('path')
const srcPath = path.join(__dirname, '..', 'src')
const htmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: path.join(srcPath, 'index'),
  plugins: [
    new htmlWebpackPlugin({
      // 以根目錄中的index.html文件作為模板來自動生成dist/index.html文件
      // 注意趾诗，這里是相對根目錄而言的，因?yàn)槟_本的上下文是在根目錄下
      template: 'index.html'  
      // inject: 'head', // 腳本注入的位置蹬蚁，可以是head, body恃泪，或者為 false默認(rèn)
      // 在這里還可以自定義參數(shù)，在模板中犀斋，使用ejs方式 <%= htmlWebpackPlugin.options %>獲取自定義屬性
      title: 'webpack demo',
      // webpack5默認(rèn)開啟壓縮屬性贝乎，webpack4要手動設(shè)置
      // minify: {
      //   removeComments: true, // 刪除注釋
      //   collapseWhitespace: true  // 刪除空格
      // }
    })
  ]
}
  1. 刪除根目錄下index.html模板中手動導(dǎo)入的語句，并接收自在htmlWebpackPlugin設(shè)置的自定義參數(shù)
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
  <!-- 這是注釋 -->
</body>
</html>
  1. 執(zhí)行打包命令npm run build叽粹，可以看到dist目錄下生成了index.html
    a. 自動導(dǎo)入了打包后的文件
    b. 顯示了自定義參數(shù)的title標(biāo)題
    c. 默認(rèn)開啟了壓縮览效，刪除了注釋和空格
<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>webpack demo</title><script defer="defer" src="bundle.e97c675afbdcfa8f531d.js"></script></head><body></body></html>

clean-html-plugin 刪除之前的打包文件

隨便修改下入口文件蒙具，發(fā)現(xiàn)打包新的文件時，之前生成的打包文件每次都會存在朽肥，所以我們往往配合clean-html-plugin禁筏，在每次生成新的打包文件之前，會先刪除之前的打包文件

  1. 安裝 npm i clean-webpack-plugin -D
  2. 在webpack.common.js中配置
// webpack.common.js 公共的配置
const path = require('path')
const srcPath = path.join(__dirname, '..', 'src')
const htmlWebpackPlugin = require('html-webpack-plugin')
// webpack5寫法
const {CleanWebpackPlugin} = require('clean-webpack-plugin')

module.exports = {
  entry: path.join(srcPath, 'index'),
  plugins: [
    new CleanWebpackPlugin(), // 清除之前的打包文件
    new htmlWebpackPlugin({
      // 以根目錄中的index.html文件作為模板來自動生成dist/index.html文件
      // 注意衡招，這里是相對根目錄而言的篱昔，因?yàn)槟_本的上下文是在根目錄下
      template: 'index.html'  
    })
  ]
}

PS：webpack4中導(dǎo)入插件的寫法為const CleanWebpackPlugin = require('clean-webpack-plugin')

  1. 再次打包時，就發(fā)現(xiàn)之前的包被清除了

定義全局變量

我們通常會有個配置文件始腾，需要根據(jù)環(huán)境的不同州刽，配置不同的接口地址，這時一般就會用到全局變量浪箭，webpack可以使用DefinePlugin插件來設(shè)置全局變量

我們一般在package.json文件運(yùn)行腳本中穗椅，會自定義一個環(huán)境變量NODE_ENV(，這個變量其實(shí)是自定義的奶栖，但前端約定俗成用這個變量名)：

// mac電腦
"scripts": {
    "build": "NODE_ENV=prod webpack --config config/webpack.prod.js",
    "dev": "NODE_ENV=dev webpack server --config config/webpack.dev.js NODE_ENV=development"
  },
// windows電腦
"scripts": {
    "build": "set NODE_ENV=prod && webpack --config config/webpack.prod.js",
    "dev": "set NODE_ENV=dev && webpack server --config config/webpack.dev.js NODE_ENV=development"
  },

然后在其它腳本中匹表，我們就可以通過process.env.NODE_ENV來獲取

為了寫一個腳本配置，適配所有電腦宣鄙，所以要安裝cross-env解決跨平臺問題：
npm i cross-env -D袍镀，這樣，就可以只使用一個腳本：

"scripts": {
  "build": "cross-env NODE_ENV=prod webpack --config config/webpack.prod.js",
  "dev": "cross-env NODE_ENV=dev webpack server --config config/webpack.dev.js"
},

然后在webpack.common.js中冻晤，打印process.env.NODE_ENV可以獲取到腳本中的設(shè)置值苇羡，注意，這個process.env只有在配置文件中才能獲取到鼻弧，在其它index.js中是獲取不到的设江，除非設(shè)置了全局變量

// webpack.common.js
 plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    })
  ]

在webpack4之后，上面這些操作攘轩，webpack都幫我們內(nèi)置了叉存，所以可以在任何js文件中都能獲取到process.env.NODE_ENV的值，這個值對應(yīng)的是webpack配置文件中的mode值撑刺，即development或production

這里主要是說明怎么接收命令行的參數(shù)鹉胖，并在DefinePlugin設(shè)置全局變量的方法握玛，方便我們在模塊中使用够傍，但注意的是，設(shè)置的對象需要使用JSON.stringify轉(zhuǎn)換挠铲，包括字符串（否則字符串會被識別成變量而報錯）

開發(fā)環(huán)境啟動和配置

之前配置了開發(fā)環(huán)境腳本冕屯，但一直沒用，現(xiàn)在有了index.html模板文件和打包后的js文件拂苹，就可以使用npm run dev啟動命令安聘，根據(jù)提示打開瀏覽器，訪問http://localhost:8080/就可以查看結(jié)果了

dev啟動

跨域配置

在開發(fā)環(huán)境最常用的配置是處理跨域問題，在webpack.dev.js中設(shè)置devServer浴韭，這點(diǎn)和webpack4是一樣的

// webpack.dev.js

const path = require('path')
const commonConfig = require('./webpack.common')
const {merge} = require('webpack-merge')
const devConfig = {
  mode: 'development', // 開發(fā)環(huán)境
  output: {
    filename: 'bundle.js',  // 輸出文件名
    path: path.join(__dirname, '..', 'dist')  // 輸出目錄
  },
  devServer: {
    // 設(shè)置代理
    proxy: {
      // 將本地 /api/xxx 代理到 localhost:6666/api/xxx
      // '/api': 'http://localhost:3000',

      // 將本地 /api2/xxx 代理到 localhost:6666/xxx丘喻，通常用這個，/api2僅作為代理轉(zhuǎn)發(fā)的標(biāo)識
      '/api2': {
          target: 'http://localhost:3000',
          changeOrigin: true,
          pathRewrite: {
              '/api2': ''
          }
      }
    }
  }
}

module.exports = merge(commonConfig, devConfig)

修改index.js文件念颈，請求跨域的接口

function hello() {
  console.log('hello11')
}
fetch('/api2/data').then(res => {
  console.log(1111)
})
// 顯示跨域
fetch('http://localhost:3000/data').then(res => {
  console.log(2222)
})
hello()

寫個簡單的express服務(wù)器來測試：

const express = require('express')
const app = express()

app.listen(3000, () => {
  console.log('server is running in port: 3000');
})
app.get('/data', (req, res) => {
  console.log('11111')
  res.send('hello')
})

然后啟動開發(fā)環(huán)境:npm run dev

image.png

image.png

文件資源處理

在.js文件中導(dǎo)入import './style/index.css'樣式文件泉粉，運(yùn)行，發(fā)現(xiàn)會報錯榴芳，這是因?yàn)閣ebpack默認(rèn)只認(rèn)識js文件嗡靡，其它類型的文件都不識別。
要使webpack識別它們窟感，必須引入對應(yīng)的loader去處理讨彼，將其轉(zhuǎn)換成js認(rèn)識的文件

1. 處理樣式文件

識別.css文件

  1. 安裝npm i css-loader style-loader -D
  2. 在webpack.common.js中配置module.rules規(guī)則：
    • css-loade：為了在js中使用import方式導(dǎo)入css文件
    • style-loader：將樣式寫在html文件中head標(biāo)簽內(nèi)的<style>標(biāo)簽中
module.exports = {
  entry: path.join(srcPath, 'index'),
   module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
    ]
  },
  },

識別.less文件（sass、stylus同理）

要在.js中使用import './src/style/xxx.less'文件：

  1. 安裝npm i css-loader style-loader less-loader less -D
  2. 配置
    • less-loader：將.less文件轉(zhuǎn)譯成.css文件
module: {
    rules: [
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      }
    ]
  },

自動添加hack前綴

  1. 安裝npm i postcss-loader autoprefixer -D
  2. 在webpack.common.js中配置
module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader']
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader','postcss-loader',  'less-loader']
      }
    ]
  },
  plugins: [
    require('autoprefixer')
  ]

CSS文件抽離

在生產(chǎn)環(huán)境中柿祈，我們往往不會將樣式文件給打包到html文件中哈误，而是單獨(dú)抽離css文件

  1. 安裝：npm i mini-css-extract-plugin -D
  2. 在生產(chǎn)環(huán)境配置文件中webpack.prod.js配置，將前面的 style-loader換成mini-css-extract-plugin的loader 
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const prodConfig = {
  mode: 'production', // 生產(chǎn)環(huán)境
  output: {
    filename: 'bundle.[chunkhash].js',  // 輸出文件名躏嚎，一般要加上hash
    path: path.join(__dirname, '..', 'dist')  // 輸出目錄
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
      },
      {
        test: /\.less$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader']
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/[name]-[contenthash].css'
    })
  ]
}
  1. 打包npm run build
    css抽離

2. 圖片資源文件

想在.css中使用url導(dǎo)入圖片

body {
  background-color: yellow;
  opacity: 0.7;
  transform: rotate(45deg);
  background: url('../imgs/img002.jpg');
}

或者在.js中使用import導(dǎo)入圖片

import img from './imgs/img002.jpg'

需要借助file-loader或者url-loader黑滴，url-loader和file-loader差不多，只不過增加了一個設(shè)置文件大小閾值紧索，當(dāng)小于這個閾值時袁辈，使用base64導(dǎo)入文件

  • 開發(fā)環(huán)境
  1. 安裝：npm i file-loader -D
  2. 在開發(fā)環(huán)境，因?yàn)椴挥每紤]壓縮問題珠漂，所以webpack.dev.js可以配置file-loader 
// 處理css樣式文件中的url圖片
      {
        test: /\.(jpg|png|jpeg|gif)$/,
        use: ['file-loader']
      }
  • 生產(chǎn)環(huán)境
  1. 安裝: npm i url-loader -D
  2. 在生產(chǎn)環(huán)境晚缩，可以使用url-loader設(shè)置小圖片使用base64方式寫入
// 處理css樣式文件中的url圖片
{
        test: /\.(jpg|png|jpeg|gif)$/,
        use: {
          loader:'url-loader',
          options: {
            limit: 8192,    //限制 8kb 以下使用base64
            esMoudle: false,
            name: '[name]-[hash:8].[ext]',
            // 打包到/images目錄下
            outputPath: 'images'
          }
        }
        
      }

解析ES6+代碼

  • 安裝： npm i babel-loader @babel/core @babel/preset-env -D
  • 配置：
// webpack.common.js
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ['babel-loader'], // 1. 開啟緩存
        include: srcPath, // 2. 縮小適合范圍(寫include或exclude)
        exclude: /node_modules/
        }
    ]
  }

// 根目錄創(chuàng)建，.babelrc
{
  "presets": ["@babel/preset-env"],  // 一般使用@babel/preset-env就夠了
  "plugins": []
}

// 如果是高版本的babel媳危，比如v7.8.0 或更高版本的babel等
// .babelrc 換成根目錄創(chuàng)建 babel.config.json
{
  "presets": [
    [
      "@babel/env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        },
        "useBuiltIns": "usage",
        "corejs": "3.6.5"
      }
    ]
  ]
}

總的來說荞彼，webpack5對比webpack4來說，改動不算太多待笑，還算是比較平穩(wěn)過渡鸣皂，最后，借用網(wǎng)上一張圖暮蹂，說明webpack4升級webpack5的改動：

webpack5與webpack4差異.png

參考：
https://blog.csdn.net/xiaolinlife/article/details/107032533
https://www.imooc.com/article/287156#comment

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末寞缝，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子仰泻，更是在濱河造成了極大的恐慌荆陆，老刑警劉巖，帶你破解...
    沈念sama閱讀 219,427評論 6贊 508
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件集侯，死亡現(xiàn)場離奇詭異被啼，居然都是意外死亡帜消，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,551評論 3贊 395
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門浓体，熙熙樓的掌柜王于貴愁眉苦臉地迎上來泡挺，“玉大人，你說我怎么就攤上這事命浴≌吵模” “怎么了？”我有些...
    開封第一講書人閱讀 165,747評論 0贊 356
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵咳促，是天一觀的道長稚新。 經(jīng)常有香客問我，道長跪腹，這世上最難降的妖魔是什么褂删？ 我笑而不...
    開封第一講書人閱讀 58,939評論 1贊 295
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮冲茸，結(jié)果婚禮上屯阀，老公的妹妹穿的比我還像新娘。我一直安慰自己轴术，他們只是感情好难衰，可當(dāng)我...
    茶點(diǎn)故事閱讀 67,955評論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著逗栽，像睡著了一般盖袭。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上彼宠，一...
    開封第一講書人閱讀 51,737評論 1贊 305
  • 城市分裂傳說
    那天鳄虱，我揣著相機(jī)與錄音，去河邊找鬼凭峡。 笑死拙已，一個胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的摧冀。 我是一名探鬼主播倍踪，決...
    沈念sama閱讀 40,448評論 3贊 420
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼索昂！你這毒婦竟也來了建车？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 39,352評論 0贊 276
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對情侶失蹤楼镐，失蹤者是張志新（化名）和其女友劉穎癞志，沒想到半個月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體框产，經(jīng)...
    沈念sama閱讀 45,834評論 1贊 317
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡凄杯，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,992評論 3贊 338
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了秉宿。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片戒突。...
    茶點(diǎn)故事閱讀 40,133評論 1贊 351
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖描睦，靈堂內(nèi)的尸體忽然破棺而出膊存，到底是詐尸還是另有隱情，我是刑警寧澤忱叭，帶...
    沈念sama閱讀 35,815評論 5贊 346
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布隔崎，位于F島的核電站，受9級特大地震影響韵丑，放射性物質(zhì)發(fā)生泄漏爵卒。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,477評論 3贊 331
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一撵彻、第九天 我趴在偏房一處隱蔽的房頂上張望钓株。 院中可真熱鬧，春花似錦陌僵、人聲如沸轴合。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,022評論 0贊 22
  • 一樁弒父案碗短，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽受葛。三九已至，卻和暖如春偎谁，著一層夾襖步出監(jiān)牢的瞬間奔坟，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,147評論 1贊 272
  • 情欲美人皮
    我被黑心中介騙來泰國打工搭盾， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留咳秉，地道東北人。 一個月前我還...
    沈念sama閱讀 48,398評論 3贊 373
  • 代替公主和親
    正文 我出身青樓鸯隅，卻偏偏與公主長得像澜建，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子蝌以，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,077評論 2贊 355

推薦閱讀更多精彩內(nèi)容

  • Webpack 在網(wǎng)頁中會引用哪些常見的靜態(tài)資源炕舵？ JS .js .jsx .coffee .ts（Type...
    小K強(qiáng)閱讀 451評論 0贊 0
  • 1、組織項(xiàng)目結(jié)構(gòu)2跟畅、用npm init -y 命令初始化項(xiàng)目3咽筋、安裝你需要的模塊 npm install "" -...
    comepeng閱讀 451評論 0贊 0
  • 一奸攻、Webpack基本配置及使用 1蒜危、安裝本地Webpack 2、 Webpack可以0配置 打包工具 -> 輸出...
    HHHxxx_Hx閱讀 271評論 0贊 0
  • 1. 安裝webpack到全局 在構(gòu)建之前睹耐，我們來在本地文件新建一個存放項(xiàng)目的文件夾辐赞，比如叫demo1這個項(xiàng)目，然...
    CodeMT閱讀 593評論 0贊 3
  • webpack 中間可能會出現(xiàn)cnpm , npm ,yarn等三種安裝方式,其實(shí)最終安裝的結(jié)果都是一樣的,只是安...
    諾克斯1閱讀 348評論 0贊 0