Webpack 4.X 從入門到放肆

webpack 4：`Webpack4.X`從零配置開始

1灯抛、創(chuàng)建一個(gè)新目錄并進(jìn)入該目錄：

  mkdir webpack-4.X && cd $_

完成之后進(jìn)入創(chuàng)建好的文件夾，完成以下操作

2衡奥、通過運(yùn)行以下命令初始化 `package.json` ：

 npm init -y

3笨蚁、并引入 webpack 4：

npm i webpack --save-dev

4、我們還需要 webpack-cli 漂辐，作為一個(gè)單獨(dú)的包引入：

npm i webpack-cli --save-dev

5、現(xiàn)在打開 `package.json` 并添加一個(gè) `build`(構(gòu)建) 腳本：

package.json 代碼:

 "scripts":  {
 "build":  "webpack"
 }

6棕硫、關(guān)閉文件并保存髓涯。

嘗試運(yùn)行：

npm run build

看看會發(fā)生什么：

Insufficient number of arguments or no entry found.
Alternatively, run 'webpack(-cli) --help' for usage info.

Hash: e22d9cbf4c86c79ab1fd
Version: webpack 4.28.0
Time: 157ms
Built at: 2018-12-20 09:40:10

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for thisvalue. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

ERROR in Entry module not found: Error: Can't resolve './src' in '/Users/wujiahao/webTest/webpack-4.X'
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! webpack-4.X@1.0.0 build: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the webpack-4.X@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/wujiahao/.npm/_logs/2018-12-20T01_40_10_578Z-debug.log

webpack 4 在 ./src 中尋找 entry point(入口點(diǎn)) ！如果您不知道什么是入口哈扮，請查看官方的說明文檔纬纪。

簡而言之： entry point(入口點(diǎn)) 是 webpack 尋找開始構(gòu)建 Javascript 包的文件蚓再。

在以前版本的 webpack 中，必須在名為 webpack.config.js 的配置文件中通過 entry 屬性定義 entry point(入口點(diǎn)) 包各。

但是 從 webpack 4 開始摘仅，不再必須定義 entry point(入口點(diǎn)) ：它將默認(rèn)為 ./src/index.js ！

7问畅、測試這個(gè)新功能很簡單娃属。創(chuàng)建 `./src/index.js`：

index.js 代碼:

console.log(`I'm yi ge ru kou wen jian`);//調(diào)皮了一下

8、然后運(yùn)行構(gòu)建命令：

 npm run build

你將在 ~/webpack-4.X/dist/main.js 中獲取該 bundle(包) 护姆。

什么矾端？稍等片刻。沒有必要定義輸出文件卵皂？對的秩铆。

在 webpack 4 中，既不必須定義 entry point(入口點(diǎn)) 灯变，也不必須定義 output file(輸出文件)殴玛。

webpack 的主要優(yōu)勢在于 code splitting(代碼拆分）。但請相信我添祸，使用零配置工具可以加快速度族阅。

所以這是第一條新聞：webpack 4 不是必須要有配置文件。

它將查找 ./src/index.js 作為默認(rèn)入口點(diǎn)膝捞。而且，它會在 ./dist/main.js 中輸出模塊包愧沟。

在下一節(jié)中蔬咬，我們將看到 webpack 4 的另一個(gè)不錯(cuò)的功能：生產(chǎn)和開發(fā)模式。

webpack 4：production(生產(chǎn)) 和 development(開發(fā)) 模式

擁有2個(gè)配置文件在 webpack 中是的常見模式沐寺。

一個(gè)典型的項(xiàng)目可能有：

用于開發(fā)的配置文件林艘，用于定義 webpack dev server 和其他東西
用于生產(chǎn)的配置文件，用于定義 UglifyJSPlugin混坞，sourcemaps 等

雖然較大的項(xiàng)目可能仍然需要 2 個(gè)配置文件狐援，但在 webpack 4 中，您可以在沒有一行配置的情況下完成旦装。

怎么會這樣祭往？

webpack 4 引入了 production(生產(chǎn)) 和 development(開發(fā)) 模式合是。

事實(shí)上，如果你注意 npm run build 的輸出镶殷，你會看到一個(gè)很好的警告：

WARNING in configuration
The 'mode' option has not been set,
 webpack will fallback to 'production' for thisvalue.
 Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: 
https://webpack.js.org/concepts/mode/

警告在配置
“mode”選項(xiàng)還沒有設(shè)置，webpack將返回到“production”微酬。集
“開發(fā)”或“生產(chǎn)”的“模式”選項(xiàng)
為每個(gè)環(huán)境啟用默認(rèn)值绘趋。
您還可以將其設(shè)置為“none”颤陶，以禁用任何默認(rèn)行為。了解更多信息:https://webpack.js.org/concepts/mode/

那是什么意思陷遮？讓我們來看看滓走。

打開 package.json 并填充 script 部分，如下所示：

package.json 代碼:

"scripts":  {
    "dev":  "webpack --mode development",
    "build":  "webpack --mode production"
  }

現(xiàn)在嘗試運(yùn)行：

npm run dev

并看看 ./dist/main.js 帽馋。你看到了什么搅方？是的，我知道茬斧，一個(gè)讓人疑惑的 bundle(包) 文件…腰懂，并沒有壓縮的文件！

現(xiàn)在嘗試運(yùn)行：

npm run build

再來看看 ./dist/main.js 项秉。你會看見一個(gè) 壓縮后的 bundle(包)绣溜！

是的!

production mode(生產(chǎn)模式) 可以開箱即用地進(jìn)行各種優(yōu)化。包括壓縮娄蔼，作用域提升怖喻，tree-shaking 等。

另一方面岁诉，development mode(開發(fā)模式)針對速度進(jìn)行了優(yōu)化锚沸，僅僅提供了一種不壓縮的 bundle 。

所以這是第二條新聞：webpack 4 引入了 production(生產(chǎn)) 和 development(開發(fā)) 模式涕癣。

在 webpack 4 中哗蜈，您可以在沒有一行配置的情況下完成任務(wù)！只需定義--mode 參數(shù)即可免費(fèi)獲得所有內(nèi)容坠韩！

webpack 4：覆蓋默認(rèn) entry(入口)/output(輸出)

我喜歡 webpack 4 零配置距潘，但如何覆蓋默認(rèn) entry point(入口點(diǎn)) 和默認(rèn) output(輸出) 呢？

在 package.json 中配置它們只搁！

這是一個(gè)例子,輸入的內(nèi)容的文件夾和文件必須存在音比，輸出的無所謂如下例./entry/src/js/index.js 這個(gè)入口文件必須存在：

package.json 代碼:

1.  "scripts":  {
2.  "dev":  "webpack --mode development ./entry/src/js/index.js --output ./entry/main.js",
3.  "build":  "webpack --mode production ./entry/src/js/index.js --output ./entry/main.js"
4.  }

也可以在webpack.config.js當(dāng)中

module.exports = {
  entry: {
    main: './entry/src/js/index.js'
  }，
  output: {
    filename: './entry/main.js',
  }
};

webpack 4：用 Babel 7 轉(zhuǎn)譯 Javascript ES6

吳佳浩的個(gè)人博客

現(xiàn)代 Javascript 主要是用 ES6 編寫的氢惋。

但并非每個(gè)瀏覽器都知道如何處理 ES6 洞翩。我們需要某種轉(zhuǎn)換。

這個(gè)轉(zhuǎn)換步驟稱為 transpiling(轉(zhuǎn)譯)焰望。 transpiling(轉(zhuǎn)譯)是指采用 ES6 并使舊瀏覽器可以理解的行為骚亿。

Webpack 不知道如何進(jìn)行轉(zhuǎn)換但是有 loader(加載器) ：將它們視為轉(zhuǎn)譯器。

babel-loader 是一個(gè) webpack 的 loader(加載器)熊赖，用于將 ES6 及以上版本轉(zhuǎn)譯至 ES5 循未。

要開始使用 loader ，我們需要安裝一堆依賴項(xiàng)。尤其是：

babel-core
babel-loader
babel-preset-env 用于將 Javascript ES6 代碼編譯為 ES5

我們開始動手吧：

 npm i babel-core babel-loader babel-preset-env --save-dev
 npm i babel-loader @babel/core @babel/preset-env --save-dev

接下來的妖，通過在項(xiàng)目文件夾中創(chuàng)建名為 .babelrc的新文件來配置 Babel ：

.babelrc 代碼:

//{
//  "presets": [
//    ["env",
//      {
//        "modules": false
//      }
//    ]
//  ]
//}
#因?yàn)樾掳姹镜腷abel更新 原配置修改如下
{ 
  "presets": ["@babel/preset-env"] 
}

此時(shí)我們有2個(gè)配置 babel-loader 的選項(xiàng)：

使用 webpack 的配置文件
在你的 npm scripts 中使用 --module-bind

是的绣檬，我知道你在想什么。 webpack 4 將自己作為零配置工具推向市場嫂粟。為什么要再次編寫配置文件娇未？

webpack 4 中零配置的概念適用于：

entry point(入口點(diǎn)) 默認(rèn)為 ./src/index.js
output(輸出) 默認(rèn)為 ./dist/main.js
production(生產(chǎn)) 和 development(開發(fā)) 模式（無需為生產(chǎn)和開發(fā)環(huán)境創(chuàng)建2個(gè)單獨(dú)的配置）

這就夠了。但是對于在 webpack 4 中使用 loader(加載器)星虹，您仍然需要創(chuàng)建配置文件零抬。

webpack 4 中的加載器是否與 webpack 3 相同？有沒有計(jì)劃為像 babel-loader 這樣的普遍使用的 loader(加載器) 提供零配置宽涌？

是的平夜！

“對于未來（在v4之后，可能是4.x或5.0）卸亮，我們已經(jīng)開始探索預(yù)置或附加系統(tǒng)將如何幫助定義它忽妒。我們不想要的是:嘗試將一堆東西作為默認(rèn)設(shè)置插入到 core 中，我們想要的是:允許其他人擴(kuò)展“

現(xiàn)在你仍然必須依賴 webpack.config.js兼贸。讓我們來看看…

webpack 4：通過配置文件使用 babel-loader

給 webpack 添加一個(gè)配置文件段直，以最經(jīng)典的方式使用 babel-loader。

創(chuàng)建一個(gè)名為 webpack.config.js 的新文件并配置 loader(加載器) ：

webpack.config.js 代碼溶诞，但是如果你連基本的正則表達(dá)式都看不懂我建議你補(bǔ)一點(diǎn)再來看:

module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /(node_modules)/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['env', { modules: false }]
                }
            }
        }
    ]
}

`除非您要自定義 entry point(入口點(diǎn)) 鸯檬，否則無需指定它`。

接下來打開 ./src/index.js 并編寫一些 ES6 代碼：

index.js 代碼:

 const arr =  [1,  2,  3];
 const ES6fn =  ()  => 
 console.log(...arr);
 window.ES6fn = ES6fn;

最后螺垢，創(chuàng)建 bundle(包)：

 npm run build

現(xiàn)在看一下 ./dist/main.js 來查看轉(zhuǎn)換后的代碼喧务。

webpack 4：不通過配置文件使用 babel-loader（在 npm scripts 中使用）

還有另一種方法來使用 webpack 的 loader(加載器)。

--module-bind 參數(shù)允許你在命令行指定加載器枉圃。謝謝 Cezar 指出這一點(diǎn)蹂楣。

該參數(shù)不是特定于 webpack 4 的。從版本 3 開始就有了讯蒲。

要在沒有配置文件的情況下使用 babel-loader ，請?jiān)?package.json 中配置你的 npm scripts肄扎，如下所示：

package.json 代碼:

  "scripts":  {
  "dev":  "webpack --mode development --module-bind js=babel-loader",
  "build":  "webpack --mode production --module-bind js=babel-loader"
  }

你可以再出運(yùn)行 npm run build 構(gòu)建項(xiàng)目墨林。

webpack 4：為 React 項(xiàng)目配置 webpack 4

我的個(gè)人簡介地址https://gm.gmcfg.com/

一旦你安裝并配置了 babel ，這里就很容易了犯祠。

安裝 React：

npm i react react-dom --save-dev

接下來添加 babel-preset-react ：

 npm i @babel/preset-react --save-dev

在 .babelrc 中配置預(yù)設(shè)：

.babelrc代碼:

  {
  "presets":  [
        "@babel/preset-env",  
        "@babel/preset-react"
        ]
  }

很快就完成了旭等！

你可以配置 babel-loader 來讀取 .jsx 文件。如果你的 React 組件正在使用 jsx 擴(kuò)展衡载，這將非常有用搔耕。

打開 webpack.config.js 并像這樣配置 loader(加載器) ：

webpack.config.js 代碼:

  module.exports =  {
  module:  {
  rules:  [
    {
      test:  /\.(js|jsx)$/,
      exclude:  /node_modules/,
      use:  {
          loader:  "babel-loader"
      }
    }
   ]
  }
 };

要測試一下你可以在 ./src/App.js 中創(chuàng)建一個(gè)測試的 React 組件：

App.js 代碼:

  import  React  from  "react";
  import  ReactDOM  from  "react-dom";
  const  App  =  ()  =>  {
      return  (
            <div>
                  <p>React here!</p>
            </div>
          );
    };
  export  default  App;
  ReactDOM.render(<App  />, document.getElementById("app"));

接下來在 ./src/index.js 中 import(導(dǎo)入) 組件：

index.js 代碼:

 import  App  from  "./App";

然后再次運(yùn)行構(gòu)建 npm run build 。

webpack 4：HTML webpack 插件

webpack 需要兩個(gè)額外的組件來處理HTML：html-webpack-plugin 和 html-loader。

添加依賴項(xiàng)：

 npm i html-webpack-plugin html-loader --save-dev

然后更新 webpack 配置：

webpack.config.js 代碼:

  const  HtmlWebPackPlugin  =  require("html-webpack-plugin");
  module.exports =  {
  module:  {
  rules:  [
          {
            test:  /\.(js|jsx)$/,
            exclude:  /node_modules/,
            use:  {
                    loader:  "babel-loader"
            }
          },
          {
              test:  /\.html$/,
              use:  [
                    {
                      loader:  "html-loader",
                      options:  { minimize:  true  }
                    }
                ]
          }
    ]
  },
  plugins:  [
      new  HtmlWebPackPlugin({
              template:  "./src/index.html",
              filename:  "./index.html"
        })
      ]
  };

接下來在 ./src/index.html 中創(chuàng)建一個(gè) HTML 文件：

index.html 代碼:

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="utf-8">
 <title>webpack 4 quickstart</title>
 </head>
 <body>
 <div id="app">
 </div>
 </body>
 </html>

然后再次運(yùn)行構(gòu)建：

  npm run build

并查看 ./dist 文件夾弃榨。您應(yīng)該看到生成的 HTML 菩收。

沒有必要在 HTML 文件中引入您的 Javascript ：bundle(包) 會自動注入。

在瀏覽器中打開 ./dist/index.html ：您應(yīng)該看到 React 組件正常工作鲸睛！

正如您所看到的娜饵，在處理 HTML 方面沒有任何改變。

webpack 4 仍然是一個(gè)針對 Javascript 的模塊打包器官辈。

但是有計(jì)劃將 HTML 添加為模塊（HTML作為 entry point(入口點(diǎn))）箱舞。

webpack 4：將 CSS 提取到一個(gè)文件中

webpack 不知道如何將 CSS 提取到一個(gè)文件中。

在過去拳亿，這是 extract-text-webpack-plugin 的工作晴股。

不幸的是，這個(gè)插件與 webpack 4 不太兼容肺魁。

根據(jù) Michael Ciniawsky 的說法：

extract-text-webpack-plugin 的維護(hù)已經(jīng)成為了一個(gè)很大的負(fù)擔(dān)电湘，這已經(jīng)不是第一次因?yàn)樗膯栴}，而使升級 webpack 主版本變的而復(fù)雜和繁瑣

mini-css-extract-plugin 可以解決這些問題万搔。

注意：確保將 webpack 更新到 4.2.0 版胡桨。否則 mini-css-extract-plugin 將無效！

使用以下命令安裝該插件和 css-loader ：

npm i mini-css-extract-plugin css-loader --save-dev

接下來創(chuàng)建一個(gè)用于測試的 CSS 文件：

css 代碼:

  /* */
  /*  ./src/main.css */
  /* */
  body {
  line-height:  2;
  }

配置插件和 loader(加載器)：

webpack.config.js 代碼:

const  HtmlWebPackPlugin  =  require("html-webpack-plugin");
const  MiniCssExtractPlugin  =  require("mini-css-extract-plugin");
const path = require('path')
const webpack = require('webpack')
module.exports =  {
entry:'./src/main.js',
output: {
  filename: './src/dist/index.js',
},
devServer: {
  // 服務(wù)器的根目錄 Tell the server where to serve content from
  // https://webpack.js.org/configuration/dev-server/#devserver-contentbase
  contentBase: path.join(__dirname, './src'),
  // 自動打開瀏覽器
  open: true,
  // 端口號
  port: 8888,
  //指定要使用的主機(jī)瞬雹。默認(rèn)情況下這是localhost昧谊。如果您希望外部可以訪問您的服務(wù)器，請像下面這樣指定
  // host:'0.0.0.0',
  // --------------- 1 熱更新 -----------------
  hot: true,
  // 開啟gzip壓縮
  compress: true
},
module:  {
    rules:  [
          {
            test:  /\.js$/,
            exclude:  /node_modules/,
            use:  {
                loader:  "babel-loader"
            }
         },
         {
              test:  /\.html$/,
              use:  [{
                  loader:  "html-loader",
                  options:  { minimize:  true  }
              }]
            },
        {
              test:  /\.css$/,
              use:  [MiniCssExtractPlugin.loader,  "css-loader"]
              }
      ]
},
plugins:  [
//--------------------開啟熱更新----------------------------------
       new webpack.HotModuleReplacementPlugin(),
//--------------------開啟自動將JS當(dāng)中文件導(dǎo)入到html----------------------------------
        new  HtmlWebPackPlugin({
              template:  "./src/index.html",
              filename:  "./index.html"
       }),
      new  MiniCssExtractPlugin({
            filename:  "[name].css",
            chunkFilename:  "[id].css"
      })
  ]
};

最后在 entry point(入口點(diǎn)) import(導(dǎo)入) CSS：

index.js 代碼:

1.  //
2.  // PATH OF THIS FILE: ./src/index.js
3.  //
4.  import style from  "./main.css";

然后再次運(yùn)行構(gòu)建：

 npm run build

并查看 ./dist 文件夾酗捌。你應(yīng)該看到生成的CSS呢诬！

回顧一下：extract-text-webpack-plugin 不適用于webpack 4 。請改用 mini-css-extract-plugin 代替胖缤。

webpack 4：webpack dev server

每當(dāng)你對代碼進(jìn)行更改時(shí)尚镰，運(yùn)行 npm run dev ？遠(yuǎn)非我們的理想哪廓。

使用 webpack 配置開發(fā)服務(wù)器只需一分鐘狗唉。

配置好的 webpack dev server 將在瀏覽器中啟動您的應(yīng)用程序。

每次更改文件時(shí)涡真，它都會自動刷新瀏覽器的窗口分俯。

要設(shè)置 webpack dev server，請安裝包：

 npm i webpack-dev-server --save-dev

接下來打開 package.json 并調(diào)整 scripts 哆料，如下所示：

package.json:

  "scripts":  {
    "start":  "webpack-dev-server --mode development --open ",
    "build":  "webpack --mode production"
  }

保存并關(guān)閉文件缸剪。

現(xiàn)在，通過運(yùn)行以下命令：

npm run start

你會看到 webpack dev server 在瀏覽器中啟動你的應(yīng)用程序东亦。

webpack dev server 非常適合開發(fā)杏节。（它也可以使 React Dev Tools 在您的瀏覽器中正常工作）。

最后編輯于：2019.01.13 17:37:15

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市奋渔，隨后出現(xiàn)的幾起案子镊逝，更是在濱河造成了極大的恐慌，老刑警劉巖卒稳，帶你破解...
沈念sama閱讀 217,277評論 6贊 503
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件蹋半，死亡現(xiàn)場離奇詭異，居然都是意外死亡充坑，警方通過查閱死者的電腦和手機(jī)减江，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,689評論 3贊 393
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來捻爷，“玉大人辈灼，你說我怎么就攤上這事∫查” “怎么了巡莹？”我有些...
開封第一講書人閱讀 163,624評論 0贊 353
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長甜紫。經(jīng)常有香客問我降宅，道長，這世上最難降的妖魔是什么囚霸？我笑而不...
開封第一講書人閱讀 58,356評論 1贊 293
?港島之戀（遺憾婚禮）
正文為了忘掉前任腰根，我火速辦了婚禮，結(jié)果婚禮上拓型，老公的妹妹穿的比我還像新娘额嘿。我一直安慰自己，他們只是感情好劣挫，可當(dāng)我...
茶點(diǎn)故事閱讀 67,402評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布册养。她就那樣靜靜地躺著，像睡著了一般压固。火紅的嫁衣襯著肌膚如雪球拦。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 51,292評論 1贊 301
城市分裂傳說
那天帐我，我揣著相機(jī)與錄音坎炼，去河邊找鬼。笑死焚刚，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的扇调。我是一名探鬼主播矿咕，決...
沈念sama閱讀 40,135評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了碳柱？” 一聲冷哼從身側(cè)響起捡絮，我...
開封第一講書人閱讀 38,992評論 0贊 275
萬榮殺人案實(shí)錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎莲镣，沒想到半個(gè)月后福稳，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 45,429評論 1贊 314
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡瑞侮，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,636評論 3贊 334
?白月光啟示錄
正文我和宋清朗相戀三年的圆，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片半火。...
茶點(diǎn)故事閱讀 39,785評論 1贊 348
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡越妈，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出钮糖，到底是詐尸還是另有隱情梅掠，我是刑警寧澤，帶...
沈念sama閱讀 35,492評論 5贊 345
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布店归，位于F島的核電站阎抒，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏消痛。R本人自食惡果不足惜且叁，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,092評論 3贊 328
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望肄满。院中可真熱鬧谴古，春花似錦、人聲如沸稠歉。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,723評論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽怒炸。三九已至带饱，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間阅羹，已是汗流浹背勺疼。一陣腳步聲響...
開封第一講書人閱讀 32,858評論 1贊 269
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留捏鱼，地道東北人执庐。一個(gè)月前我還...
沈念sama閱讀 47,891評論 2贊 370
代替公主和親
正文我出身青樓，卻偏偏與公主長得像导梆，于是被迫代替她去往敵國和親轨淌。傳聞我的和親對象是個(gè)殘疾皇子迂烁，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 44,713評論 2贊 354

Webpack 4.X 從入門到放肆

webpack 4：Webpack4.X從零配置開始

1灯抛、創(chuàng)建一個(gè)新目錄并進(jìn)入該目錄：

2衡奥、通過運(yùn)行以下命令初始化 package.json ：

3笨蚁、并引入 webpack 4：

4、我們還需要 webpack-cli 漂辐，作為一個(gè)單獨(dú)的包引入：

5、現(xiàn)在打開 package.json 并添加一個(gè) build(構(gòu)建) 腳本：

6棕硫、關(guān)閉文件并保存髓涯。

7问畅、測試這個(gè)新功能很簡單娃属。 創(chuàng)建 ./src/index.js：

8、然后運(yùn)行構(gòu)建命令：

webpack 4：production(生產(chǎn)) 和 development(開發(fā)) 模式

webpack 4：覆蓋默認(rèn) entry(入口)/output(輸出)

webpack 4：用 Babel 7 轉(zhuǎn)譯 Javascript ES6

webpack 4：通過配置文件使用 babel-loader

除非您要自定義 entry point(入口點(diǎn)) 鸯檬，否則無需指定它。

webpack 4：不通過配置文件使用 babel-loader（在 npm scripts 中使用）

webpack 4：為 React 項(xiàng)目配置 webpack 4

webpack 4：HTML webpack 插件

webpack 4：將 CSS 提取到一個(gè)文件中

webpack 4：webpack dev server

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

webpack 4：`Webpack4.X`從零配置開始

2衡奥、通過運(yùn)行以下命令初始化 `package.json` ：

5、現(xiàn)在打開 `package.json` 并添加一個(gè) `build`(構(gòu)建) 腳本：

7问畅、測試這個(gè)新功能很簡單娃属。創(chuàng)建 `./src/index.js`：

`除非您要自定義 entry point(入口點(diǎn)) 鸯檬，否則無需指定它`。