1、安装前准备

安装 webpack 之前,需要安装 node,这时最新的是 6,npm 是 4。如果有老的 node 项目在跑建议安装下 nvm

Webpack2学习记录-1

 

2、建议安装在局部,即在项目下的 node_modules 里

比如在 webpack_demo 目录下新建了一个 w1 项目,先用 npm init -y 命令生成一个 package.json 文件

Webpack2学习记录-1

 

接着执行 npm install webpack --save-dev 安装最新的 webpack

Webpack2学习记录-1

 

1分钟不到安装成功后,输入 ./node_modules/.bin/webpack -v 可以测试下

Webpack2学习记录-1

 

如果是全局安装,直接输入 webpack 即可

Webpack2学习记录-1

 

3、w1目录创建 app 目录及 index.js

index.js 内容如下

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());

 

4、index.js 用到了 lodash.js ,因此也需要安装下

Webpack2学习记录-1

 

5、w1目录下创建 index.html,内如如下

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

 

最后的 w1 的目录结构如下

Webpack2学习记录-1

 

6、index.html 中引入的是 dist/bundle.js ,这个 dist 目录即是 webpack 执行输出的

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

Webpack2学习记录-1

 

回到 w1,下面多出了一个 dist 目录和 bundle.js

Webpack2学习记录-1

 

7、打开 index.html,可以看到页面输出了 “Hello webpack”,至此完成。

 

8、index.js 中用到了 ES6 的 import,这个 webpack 默认支持,完整的 ES6 语法需要单独安装 babel

 

w1.zip

相关文章:

  • 2021-04-06
  • 2021-08-11
  • 2021-06-24
  • 2021-11-25
  • 2021-05-23
  • 2021-06-23
  • 2021-05-02
  • 2021-11-23
猜你喜欢
  • 2022-02-05
  • 2022-12-23
  • 2021-05-27
  • 2021-11-06
  • 2021-08-23
  • 2021-09-21
  • 2021-06-02
相关资源
相似解决方案