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。

w1.zip