Webpack2學習記錄-1

時間 2019-11-05

標籤 webpack2 webpack 學習記錄简体版

原文原文鏈接

一、安裝前準備javascript

安裝 webpack 以前，須要安裝 node，這時最新的是 6，npm 是 4。若是有老的 node 項目在跑建議安裝下 nvm。html

二、建議安裝在局部，即在項目下的 node_modules 裏java

好比在 webpack_demo 目錄下新建了一個 w1 項目，先用 npm init -y 命令生成一個 package.json 文件node

接着執行 npm install webpack --save-dev 安裝最新的 webpackwebpack

1分鐘不到安裝成功後，輸入 ./node_modules/.bin/webpack -v 能夠測試下web

若是是全局安裝，直接輸入 webpack 便可npm

三、w1目錄建立 app 目錄及 index.jsjson

index.js 內容以下babel

import _ from 'lodash';

function component () {
  var element = document.createElement('div');

  /* lodash is required for the next line to work */
  element.innerHTML = _.join(['Hello','webpack'], ' ');

  return element;
}

document.body.appendChild(component());

四、index.js 用到了 lodash.js ，所以也須要安裝下app

五、w1目錄下建立 index.html，內如以下

<html>
  <head>
    <title>webpack 2 demo</title>
  </head>
  <body>
     <script src="dist/bundle.js"></script>
  </body>
</html>

最後的 w1 的目錄結構以下

六、index.html 中引入的是 dist/bundle.js ，這個 dist 目錄便是 webpack 執行輸出的

cd 到 w1 執行 ./node_module/.bin/webpack app/index.js dist/bundle.js

回到 w1，下面多出了一個 dist 目錄和 bundle.js

七、打開 index.html，能夠看到頁面輸出了「Hello webpack」，至此完成。

八、index.js 中用到了 ES6 的 import，這個 webpack 默認支持，完整的 ES6 語法須要單獨安裝 babel。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。