webpack入門使用

時間  2019-11-10
標籤 webpack 入門 使用 简体版
原文   原文鏈接

1.廢話

做爲前端菜鳥，剛開始接觸webpack時，是由於vue，經過vue-cli拉下來的代碼，裏面webpack基本已經配置好了，須要咱們本身配置的很少，一直想弄明白webpack是怎麼用的，簡單記錄一下，模擬vue的目錄結構，使用的webpack和webpack-dev-server版本也和vue中的同樣，因此這兩個安裝時指定了版本。通常vue的目錄結構是css

clipboard.png

2.webpack的使用

1）安裝webpack

mkdir webpack-practice && cd webpack-practice // 建立並打開項目
npm init // 這時會生成一個package.json文件
npm install --save-dev webpack@3.6.0 // --save-dev 開發依賴，這時會生成package-lock.js

2）建立頁面及入口文件main.js

新建dist文件夾，並建立index.html文件，並在index.html中引入將要被webpack打包過來的bundle.js文件；新建src文件夾，並建立js入口文件main.js。如今的目錄結構是html

clipboard.png

<!-- dis/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
  <script src="bundle.js"></script>
</body>
</html>

給頁面加點背景試試前端

// src/main.js
document.body.style.background = 'pink';

如今index.html和main.js仍是不相關的，用webpack將main.js打包到dist目錄下vue

$ ./node_modules/.bin/webpack src/main.js dist/bundle.js
$ ./node_modules/.bin/webpack src/main.js dist/bundle.js
Hash: 9f53edbc27a012ab9184
Version: webpack 3.6.0
Time: 59ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.52 kB       0  [emitted]  main
   [0] ./src/main.js 50 bytes {0} [built]

這時src中就生成了一個bundle.js文件node

clipboard.png

用瀏覽器直接打開看看webpack

clipboard.png

發現頁面已經變了，說明webpack成功將main.js打包到bundle.js中去了。nginx

webpack配置文件web

在根目錄新建webpack.config.js，採用官方的配置vue-cli

// webpack.config.js
const path = require('path');
module.exports = {
  entry: './src/main.js',//入口文件
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

配置好了執行npm

$ ./node_modules/.bin/webpack
$ ./node_modules/.bin/webpack
Hash: 08e137312cf5d4feb095
Version: webpack 3.6.0
Time: 55ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.53 kB       0  [emitted]  main
   [0] ./src/main.js 55 bytes {0} [built]

執行這條命令會自動去尋找當前目錄下的webpack.config.js文件。經過配置文件，比以前操做起來方便多了，咱們能夠有更快捷的操做。

npm操做方式

咱們可使用npm start命令來代替上述繁瑣的操做，設置package.json文件中的scripts

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack"
  },
$ npm start

> webpack-practice@1.0.0 start /Users/liuzhiqin/Documents/study/webpack-practice
> webpack

Hash: 08e1373a2cf5d4feb095
Version: webpack 3.6.0
Time: 53ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.53 kB       0  [emitted]  main
   [0] ./src/main.js 55 bytes {0} [built]

執行這個命令會在node_modules/.bin中尋找webpack，不管是全局仍是局部安裝的webpack，你都不須要寫前面那指明詳細的路徑了。

3）打包css文件

首先咱們讓頁面的內容更豐富些，在src中新建page.js，並寫些內容

// src/page.js
module.exports = function () {
  let content = document.createElement('div');
  content.textContent = 'In the begining God created the heavens and the earth';
  return content;
}

入口文件是main.js，因此要將page.js引入到main.js中

// src/main.js
import Page from './page';
document.body.style.background = 'pink';
document.querySelector('#app').appendChild(Page());

運行一下試試

$ npm start

> webpack-practice@1.0.0 start /Users/liuzhiqin/Documents/study/webpack-practice
> webpack

Hash: b4bcab267ae059f4e8b5
Version: webpack 3.6.0
Time: 65ms
    Asset     Size  Chunks             Chunk Names
bundle.js  3.21 kB       0  [emitted]  main
   [0] ./src/main.js 135 bytes {0} [built]
   [1] ./src/page.js 193 bytes {0} [built]

而後看看頁面

clipboard.png

接下來咱們給文字加點樣式，在src新建page.css文件，加些樣式

/* src/page.css */
#app div{
  color: #333;
  font-size: 30px;
  font-family: fantasy;
}

一樣在main.js中引入，同時咱們將背景顏色改一下

// src/main.js
import Page from './page';
import './page.css';
document.body.style.background = '#f7f7f7';
document.querySelector('#app').appendChild(Page());

運行一下試試

$ npm start

> webpack-practice@1.0.0 start /Users/liuzhiqin/Documents/study/webpack-practice
> webpack

Hash: 5d67b4883c9d13aec1e1
Version: webpack 3.6.0
Time: 65ms
    Asset     Size  Chunks             Chunk Names
bundle.js  3.77 kB       0  [emitted]  main
   [0] ./src/main.js 155 bytes {0} [built]
   [1] ./src/page.js 193 bytes {0} [built]
   [2] ./src/page.css 273 bytes {0} [built] [failed] [1 error]

ERROR in ./src/page.css
Module parse failed: /Users/liuzhiqin/Documents/study/webpack-practice/src/page.css Unexpected character '#' (2:0)
You may need an appropriate loader to handle this file type.
| /* src/page.css */
| #app div{
|   color: '#fff';
|   font-size: 30px;
 @ ./src/main.js 3:0-19
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! webpack-practice@1.0.0 start: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the webpack-practice@1.0.0 start 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/liuzhiqin/.npm/_logs/2018-10-19T06_24_25_011Z-debug.log

咦，怎麼到page.css那裏報錯了，報錯信息寫的很清楚，須要合適的loader去處理這種文件類型。loader是webpack中用來處理不一樣文件的，如樣式、圖片、JS等資源，最後打包輸出。webpack處理css文件須要style-loader和css-loader。

安裝style-loader和css-loader

$ npm install --save-dev style-loader css-loader
npm WARN css-loader@1.0.0 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-practice@1.0.0 No repository field.

+ style-loader@0.23.1
+ css-loader@1.0.0
added 42 packages from 54 contributors in 5.966s

並在webpack.config.js中配置

...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader"
          }
        ]
      },
    ]
  }

運行一下

$ npm start

> webpack-practice@1.0.0 start /Users/liuzhiqin/Documents/study/webpack-practice
> webpack

Hash: 0c5a8f5abb63caaabad1
Version: webpack 3.6.0
Time: 393ms
    Asset     Size  Chunks             Chunk Names
bundle.js  20.6 kB       0  [emitted]  main
   [0] ./src/main.js 158 bytes {0} [built]
   [1] ./src/page.js 193 bytes {0} [built]
   [2] ./src/page.css 1.07 kB {0} [built]
   [3] ./node_modules/css-loader!./src/page.css 252 bytes {0} [built]
    + 3 hidden modules

看看頁面效果

clipboard.png

4）打包scss文件

webpack處理scss文件和css相似。首先也是在src目錄下新建page.scss文件，並在main.js中引入

// src/page.scss
#app{
  div{
    text-align: center;
    border: 1px solid red;
  }
}

// src/main.js
import Page from './page';
import './page.css';
import './page.scss';
document.body.style.background = '#f7f7f7';
document.querySelector('#app').appendChild(Page());

運行一下確定會報錯

$ npm start

> webpack-practice@1.0.0 start /Users/liuzhiqin/Documents/study/webpack-practice
> webpack

Hash: e6d2ef92a954bef9d9f4
Version: webpack 3.6.0
Time: 412ms
    Asset     Size  Chunks             Chunk Names
bundle.js  21.2 kB       0  [emitted]  main
   [0] ./src/main.js 181 bytes {0} [built]
   [1] ./src/page.js 193 bytes {0} [built]
   [2] ./src/page.css 1.07 kB {0} [built]
   [3] ./node_modules/css-loader!./src/page.css 252 bytes {0} [built]
   [7] ./src/page.scss 263 bytes {0} [built] [failed] [1 error]
    + 3 hidden modules

ERROR in ./src/page.scss
Module parse failed: /Users/liuzhiqin/Documents/study/webpack-practice/src/page.scss Unexpected character '#' (2:0)
You may need an appropriate loader to handle this file type.
| // src/page.scss
| #app{
|   div{
|     text-align: center;
 @ ./src/main.js 4:0-21
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! webpack-practice@1.0.0 start: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the webpack-practice@1.0.0 start 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/liuzhiqin/.npm/_logs/2018-10-19T07_17_11_531Z-debug.log

處理scss文件須要安裝sass-loader和node-sass

$ npm install --save-dev sass-loader node-sass

安裝的那些開發依賴均可以在package.json中找到

"devDependencies": {
    "css-loader": "^1.0.0",
    "node-sass": "^4.9.4",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^3.6.0"
  }

修改webpack.config.js配置

...
  module: {
    rules: [
      ...
      {//處理scss
        test: /\.scss$/,
        use: ["style-loader","css-loader","sass-loader"]//簡化寫法
      }
    ]
  }
}

再次運行一下

$ npm start

> webpack-practice@1.0.0 start /Users/liuzhiqin/Documents/study/webpack-practice
> webpack

Hash: 96acf3f989cacc7756fa
Version: webpack 3.6.0
Time: 500ms
    Asset     Size  Chunks             Chunk Names
bundle.js  22.3 kB       0  [emitted]  main
   [2] ./src/main.js 181 bytes {0} [built]
   [3] ./src/page.js 193 bytes {0} [built]
   [4] ./src/page.css 1.07 kB {0} [built]
   [5] ./node_modules/css-loader!./src/page.css 252 bytes {0} [built]
   [7] ./src/page.scss 1.2 kB {0} [built]
   [8] ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/page.scss 222 bytes {0} [built]
    + 3 hidden modules

頁面已經發生了變化

clipboard.png

5）打包圖片資源

首先在src中新件夾image,用於存放原始圖片，而後隨便找張圖片放進去。webpack處理圖片須要安裝url-loader和file-loader

npm isntall --save-dev url-loader file-loader

配置webpack.config.js,在module中加上處理圖片的規則

// webpack.config.js
const path = require('path');
module.exports = {
 ...
  module: {
    rules: [
      ...
      {//處理圖片
        test: /.(jpg|jpeg|png|gif|svg)$/,
        use: ['url-loader?limit=8192&name=images/[name]-[hash:5].[ext]']//打包後放在images文件下，並加上哈希值命名
      }
    ]
  }
}

同時，在main.js中加引入圖片

// src/main.js
import Page from './page';
import './page.css';
import './page.scss';
document.body.style.background = '#f7f7f7';
document.querySelector('#app').appendChild(Page());

let myImg = new Image();
myImg.src = require('./images/hand.jpg');
document.querySelector('#app').appendChild(myImg);
$ npm start

> webpack-practice@1.0.0 start /Users/liuzhiqin/Documents/study/webpack-practice
> webpack

Hash: a286e8bbed5798e46b43
Version: webpack 3.6.0
Time: 383ms
                Asset     Size  Chunks             Chunk Names
images/hand-a729a.jpg   106 kB          [emitted]
            bundle.js  22.6 kB       0  [emitted]  main
   [2] ./src/main.js 299 bytes {0} [built]
   [3] ./src/page.js 193 bytes {0} [built]
   [4] ./src/page.css 1.07 kB {0} [built]
   [5] ./node_modules/css-loader!./src/page.css 252 bytes {0} [built]
   [7] ./src/page.scss 1.2 kB {0} [built]
   [8] ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/page.scss 222 bytes {0} [built]
   [9] ./src/images/hand.jpg 67 bytes {0} [built]
    + 3 hidden modules

clipboard.png

咱們看到在dist中生成了一個新的文件夾images，打包後的圖片也在裏面，咱們看看頁面效果

clipboard.png

6）webpack-dev-server的使用

通常咱們都是項目放到服務器上的，這樣咱們就能夠實現自動刷新頁面，webpack也能夠起服務的，這時須要安裝webpack-dev-server。

$ npm install --save-dev webpack-dev-server@2.9.1

安裝成功後，咱們須要對webpack進行配置，這時就能夠放到服務器上運行了

// webpack.config.js
const path = require('path');
module.exports = {
  entry: './src/main.js',//入口文件
  output: {
    filename: 'bundle.js',//打包後輸出的文件名
    path: path.resolve(__dirname, 'dist') //打包後文件存放的地方
  },
  ...
  devServer: {
    contentBase: './dist'//服務指向的根目錄
  }
}

執行代碼

$ ./node_modules/.bin/webpack-dev-server
Project is running at http://localhost:8080/
webpack output is served from /
Content not from webpack is served from ./dist
Hash: 97287251caffe518e6c6
Version: webpack 3.6.0
Time: 976ms
                Asset    Size  Chunks                    Chunk Names
images/hand-a729a.jpg  106 kB          [emitted]
            bundle.js  348 kB       0  [emitted]  [big]  main
  [37] multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.js 40 bytes {0} [built]
  [38] (webpack)-dev-server/client?http://localhost:8080 7.23 kB {0} [built]
  [39] ./node_modules/url/url.js 23.3 kB {0} [built]
  [45] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
  [46] ./node_modules/ansi-regex/index.js 135 bytes {0} [built]
  [47] ./node_modules/loglevel/lib/loglevel.js 7.86 kB {0} [built]
  [48] (webpack)-dev-server/client/socket.js 1.04 kB {0} [built]
  [80] (webpack)-dev-server/client/overlay.js 3.73 kB {0} [built]
  [85] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
  [87] (webpack)/hot/emitter.js 77 bytes {0} [built]
  [89] ./src/main.js 301 bytes {0} [built]
  [90] ./src/page.js 193 bytes {0} [built]
  [91] ./src/page.css 1.07 kB {0} [built]
  [94] ./src/page.scss 1.2 kB {0} [built]
  [96] ./src/images/hand.jpg 67 bytes {0} [built]
    + 82 hidden modules
webpack: Compiled successfully.

在瀏覽器輸入localhost:8080，中看看效果

clipboard.png

這時咱們將背景改變一下，讓它變回粉色試試

// src/main.js
import Page from './page';
import './page.css';
import './page.scss';
document.body.style.background = 'pink';
document.querySelector('#app').appendChild(Page());

let myImg = new Image();
myImg.src = require('./images/hand.jpg');
document.querySelector('#app').appendChild(myImg);

webpack會自動打包，而且頁面自動刷新，不再用手動刷新了。

clipboard.png

在開發階段，通常都是在本地起個服務，執行npm run dev就能運行。爲了效法vue項目的目錄結構，在根目錄新建文件夾build，並將webpack.config.js移到其中，並將其重命名爲webpack.dev.conf.js。在package.json中加上

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"
  },

執行npm run dev試試

$ npm run dev

> webpack-practice@1.0.0 dev /Users/liuzhiqin/Documents/study/webpack-practice
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 10% building modules 1/1 modules 0 active
Project is running at http://localhost:8080/
webpack output is served from /
Content not from webpack is served from ./dist
Hash: 53ee487180346d1f2264
Version: webpack 3.6.0
Time: 1244ms
                Asset    Size  Chunks                    Chunk Names
images/hand-a729a.jpg  106 kB          [emitted]
            bundle.js  348 kB       0  [emitted]  [big]  main
  [37] multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.js 40 bytes {0} [built]
  [38] (webpack)-dev-server/client?http://localhost:8080 7.23 kB {0} [built]
  [39] ./node_modules/url/url.js 23.3 kB {0} [built]
  [45] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
  [46] ./node_modules/ansi-regex/index.js 135 bytes {0} [built]
  [47] ./node_modules/loglevel/lib/loglevel.js 7.86 kB {0} [built]
  [48] (webpack)-dev-server/client/socket.js 1.04 kB {0} [built]
  [80] (webpack)-dev-server/client/overlay.js 3.73 kB {0} [built]
  [85] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
  [87] (webpack)/hot/emitter.js 77 bytes {0} [built]
  [89] ./src/main.js 298 bytes {0} [built]
  [90] ./src/page.js 193 bytes {0} [built]
  [91] ./src/page.css 1.07 kB {0} [built]
  [94] ./src/page.scss 1.2 kB {0} [built]
  [96] ./src/images/hand.jpg 67 bytes {0} [built]
    + 82 hidden modules
webpack: Compiled successfully.
webpack: Compiling...
Hash: 97287251caffe518e6c6
Version: webpack 3.6.0
Time: 108ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  348 kB       0  [emitted]  [big]  main
 + 1 hidden asset
  [85] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
  [89] ./src/main.js 301 bytes {0} [built]
    + 95 hidden modules
webpack: Compiled successfully.

7）webpack插件

vue-cli拉下來的vue項目中，根目錄有個index.html文件，這是個模板文件，用於生成dist文件下面的index.html文件，這就須要引入HtmlWebpackPlugin插件

安裝HtmlWebpackPlugin

$ npm install --save-dev html-webpack-plugin
npm WARN css-loader@1.0.0 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-practice@1.0.0 No repository field.

+ html-webpack-plugin@3.2.0
added 38 packages from 57 contributors in 8.443s

在根目錄新建一個index.html文件，裏面的代碼以下

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

再次執行npm run dev，頁面一樣了成功顯示

$ npm run dev

> webpack-practice@1.0.0 dev /Users/liuzhiqin/Documents/study/webpack-practice
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 10% building modules 1/1 modules 0 active
Project is running at http://localhost:8080/
webpack output is served from /
Content not from webpack is served from ./dist
Hash: d6c1b4bbf4e88618a995
Version: webpack 3.6.0
Time: 1696ms
                Asset       Size  Chunks                    Chunk Names
images/hand-a729a.jpg     106 kB          [emitted]
            bundle.js     348 kB       0  [emitted]  [big]  main
           index.html  389 bytes          [emitted]
  [37] multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.js 40 bytes {0} [built]
  [38] (webpack)-dev-server/client?http://localhost:8080 7.23 kB {0} [built]
  [39] ./node_modules/url/url.js 23.3 kB {0} [built]
  [45] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
  [46] ./node_modules/ansi-regex/index.js 135 bytes {0} [built]
  [47] ./node_modules/loglevel/lib/loglevel.js 7.86 kB {0} [built]
  [48] (webpack)-dev-server/client/socket.js 1.04 kB {0} [built]
  [80] (webpack)-dev-server/client/overlay.js 3.73 kB {0} [built]
  [85] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
  [87] (webpack)/hot/emitter.js 77 bytes {0} [built]
  [89] ./src/main.js 301 bytes {0} [built]
  [90] ./src/page.js 193 bytes {0} [built]
  [91] ./src/page.css 1.07 kB {0} [built]
  [94] ./src/page.scss 1.2 kB {0} [built]
  [96] ./src/images/hand.jpg 67 bytes {0} [built]
    + 82 hidden modules
Child html-webpack-plugin for "index.html":
     1 asset
       [0] ./node_modules/html-webpack-plugin/lib/loader.js!./index.html 539 bytes {0} [built]
       [1] ./node_modules/lodash/lodash.js 540 kB {0} [built]
       [2] (webpack)/buildin/global.js 509 bytes {0} [built]
       [3] (webpack)/buildin/module.js 517 bytes {0} [built]
webpack: Compiled successfully.
webpack: Compiling...
Hash: 7fd780016bdbd41a7a19
Version: webpack 3.6.0
Time: 87ms
     Asset       Size  Chunks             Chunk Names
index.html  353 bytes          [emitted]
 + 2 hidden assets
  [85] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
    + 96 hidden modules
Child html-webpack-plugin for "index.html":
     1 asset
       [0] ./node_modules/html-webpack-plugin/lib/loader.js!./index.html 502 bytes {1} [built]
        + 3 hidden modules
webpack: Compiled successfully.
webpack: Compiling...
Hash: c3c1881cc01ac3fc0696
Version: webpack 3.6.0
Time: 84ms
     Asset       Size  Chunks             Chunk Names
index.html  349 bytes          [emitted]
 + 2 hidden assets
  [85] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
    + 96 hidden modules
Child html-webpack-plugin for "index.html":
     1 asset
       [0] ./node_modules/html-webpack-plugin/lib/loader.js!./index.html 498 bytes {0} [built]
        + 3 hidden modules
webpack: Compiled successfully.

在模板文件中，沒有引入bundle.js文件，HtmlWebpackPlugin會自動添加。

clipboard.png

其實，能夠徹底將dist文件夾刪掉，服務依然能正常運行，這是由於webpack-dev-server會把打包好的數據存在內存中。如今目錄結構是

clipboard.png

這就是爲何在開發階段時，只執行npm run dev來啓動webpack-dev-server，那時並無生成dist文件夾，能夠正常開發，從內存中直接加載數據。部署時，在經過命令打包（通常是npm run build)生成dist，而後再講將打包好的dist放到服務器上，再經過nginx等web服務啓動。

部署打包

在build文件下，新建webpack.prod.conf.js，裏面的配置和webpack.dev.conf.js很像，以下

// build/webpack.prod.conf.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './src/main.js',//入口文件
  output: {
    filename: 'bundle.js',//打包後輸出的文件名
    path: path.resolve(__dirname, '../dist'),//打包後文件存放的地方
  },
  ...
  devServer: {
    contentBase: './dist',//服務指向的根目錄
  },
  //webpack插件
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, '../index.html')
        })
    ]
}

並更新package.json，加上build命令，並將start設置爲啓動dev

{
  ...
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "npm run dev",
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "build": "NODE_ENV=production webpack --progress --config build/webpack.prod.conf.js"
  },
...
}

執行打包命令

$ npm run build

> webpack-practice@1.0.0 build /Users/liuzhiqin/Documents/study/webpack-practice
> NODE_ENV=production webpack --progress --config build/webpack.prod.conf.js

Hash: 4dde899e11c579299335
Version: webpack 3.6.0
Time: 971ms
                Asset       Size  Chunks             Chunk Names
images/hand-a729a.jpg     106 kB          [emitted]
            bundle.js    22.6 kB       0  [emitted]  main
           index.html  349 bytes          [emitted]
   [2] ./src/main.js 301 bytes {0} [built]
   [3] ./src/page.js 193 bytes {0} [built]
   [4] ./src/page.css 1.07 kB {0} [built]
   [5] ./node_modules/css-loader!./src/page.css 252 bytes {0} [built]
   [7] ./src/page.scss 1.2 kB {0} [built]
   [8] ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/page.scss 254 bytes {0} [built]
   [9] ./src/images/hand.jpg 67 bytes {0} [built]
    + 3 hidden modules
Child html-webpack-plugin for "index.html":
     1 asset
       [0] ./node_modules/html-webpack-plugin/lib/loader.js!./index.html 498 bytes {0} [built]
       [2] (webpack)/buildin/global.js 509 bytes {0} [built]
       [3] (webpack)/buildin/module.js 517 bytes {0} [built]
        + 1 hidden module

這時咱們的根目錄就會生成一個dist文件

clipboard.png

未完待續，菜鳥總結，但願能幫到其餘新手，大神請忽略，勿噴~

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程