[webpack001] 最简单webpack应用

webpack入门,最好还是看官方文档 Getting Started,官方文档讲解的非常透彻。

唯一不好的地方就是阅读英文很别扭,影响阅读效率。

但是,还是建议阅读英文文档,边翻译边学习;
有些翻译会省略很多东西,比如MDN上的 JS Date.prototype.toLocaleString

  • 英文文档 你可以找到 option 链接,继而找到,month 的 5 种格式:
    numeric, 2-digit, long, short, narrow
  • 中文文档 上却没有!

安装webpack

mkdir webpack-demo
cd webpack-demo
yarn init -y
yarn add -D webpack webpack-cli

安装了 webpack 后,再安装 lodash

yarn add lodash

vscode 打开

code .

webpack.config.js

根目录下,新建 webpack.config.js文件,编写如下内容

const path = require('path');

module.exports = {
  entry: './src/index.js',
  mode: 'development', // development, production
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

index.html

根目录下,新建 index.html 文件,内容如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script src="./dist/main.js"></script>
</body>
</html>

src/index.js

根目录下,新建 src 目录,并在 src 目录下新建 index.js 文件,内容如下:

import _ from 'lodash';

function component() {
  const element = document.createElement('div');
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  return element;
}

document.body.appendChild(component());

package.json 中添加 scripts

修改 package.json 文件,添加 scripts

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

yarn build 执行编译,然后双击 index.html 查看结果

修改 src/index.js 文件,element.innerHTML = _.join(['Hi', 'webpack'], ' ');,编译 yarn build ,双击 index.html 再次查看结果。

一个最简单的webpack应用就是这样创建的!

End

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容