代码路径

可以在 github-webpack-起步 找到本小节要学习的代码

传统方式的弊端

使用传统方式进行前端代码编写，就是 html+js+css 三辆马车。

如果我们需要编写一个页面，里面包含了第三方库 lodash，那么需要在自己编写的js前就引入lodash,否则使用的时候因为顺序原因而导致报错,代码大致如下：

index.js

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

  // lodash（目前通过一个 script 引入）对于执行这一行是必需的
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

index.html

<!doctype html>
<html>
  <head>
    <title>起步</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

通过这种方式编写，除了上面说的顺序原因导致错误之后，还有以下不方便的地方：

  • 在index.js中，我是不知道是否引入了lodash，感觉不直观
  • 如果index.js中不需要lodash，但是最外层引入，就浪费了

使用webpack来编写上面程序

  1. 首先需要安装webpack，如果不清楚如何安装，可以参考我上篇文章 webpack安装
  2. 安装需要的第三方插件 lodash：npm install --save-dev lodash
  3. 在index.js中显示的引入 lodash：import _ from 'lodash'
  4. 通过webpack对index进行打包：npx webpack
  5. 打包之后生成一个 main.js,通过 script 引入的方式加入到 index.html 中

相应代码如下：

index.js

import _ from 'lodash';

function component() {

    let element = document.createElement('div');

    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    return element;
}

document.body.appendChild(component());

index.html

<!doctype html>
  <html>
   <head>
     <title>起步</title>
   </head>
   <body>
    <script src="main.js"></script>
   </body>
  </html>

相对于传统方式的好处：

  • index.js 中显示的引入lodash，这样就不用去了解外部是不是引入来
  • 如果 index.js 不需要 lodash，可以不需要引入
  • 因为打包是从 index.js 开始，lodash 在 index.js 中，所以不存在 js 顺序引入问题

使用一个配置文件

上面的列子比较简单，所以我门直接使用 npx webpack 就可以进行 webpack 打包，如果项目比较复杂的话，我们还是需要一个配置文件来进行配置的。

从简单入手，我们把上面的打包内容通过配置显示出来，代码如下：

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  }
};
  • entry: 入口
  • output：入口文件打包之后输出的地方

进行打包：npx webpack --config webpack.config.js

如果配置文件就叫做 webpack.config.js， 那么只需要 npx webpack,如果不是的话记得写全

结束语

今天我们知道了为啥要用webpack以及webpack带来的优势，下一章我们将对webpck如何管理资源进行讲解