之前无论是新开始一个vue项目还是一个react项目，都是直接用的现成的脚手架，简单方便。
最近在bilibili看react相关的视频，顺便也顺手学了把自己用webpack新建一个项目。
使用一个新事物之前，先了解新事物出现的用途，webpack官方文档的解释：

webpack 是一个现代 JavaScript 应用程序的静态模块打包工具

我的理解，对于一个大型的项目来说，必然会应用到很多的包和模块，以及各个文件中需要引用到别的javascript文件等，通过webpack进行打包，可以较为方便处理这些复杂的相关关系，最后生成统一的文件。

  1. 安装webpack
    首先在本地新建一个项目,然后通过npm init初始化项目,初始化项目主要是通过生成package.json文件记录项目的一些信息，比如一开始初始化的时候让你填写的一些项目名称，作者信息等内容，如下图：
    image
    初始化项目完成后，可以看到在项目目录下生成了package.json文件
    然后在项目目录下安装webpack包，或者可以全局安装webpack命令如下：

    1
    2
    npm insatll webpack -g  // 全局
    npm install webpack --save-dev // 切到项目路径下并安装

  2. 新建项目文件
    新建一个src文件夹，目录结构如下
    image

  3. 配置webpack.conf.js
    webpack是基于node进行开发的，所以相关的语法也是用的node。

1
2
3
4
5
6
7
// 向外暴露一个模块
   module.exports = {
       entry: __dirname + '/src/index.js',
       output: {
            path: __dirname +'/public', 
            filename: 'index.js',
   }

这段配置的本意是将此项目的入口文件从原本物理磁盘路径中的src/index.js，生成相应的内存文件/public/index，我们在目录下直接webpack --config webpack.conf.js命令之后，打开index.html发现报错了，找不到public/index.js。
一开始头疼这个很久，后来仔细看了打包信息：
webpack打包的过程中，文件名都是main.js,然鹅我都没有这个文件，所以我把index.js改名，重新试了一把

1
2
3
4
5
6
7
// 向外暴露一个模块
   module.exports = {
       entry: __dirname + '/src/index.js',
       output: {
            path: __dirname +'/public', 
            filename: 'index.js',
   }

执行之后可以看到在我们的项目根路径下生成了main.js文件。初步使用webpack打包成功
也算是一个小小的踩坑记，对于4.x版本的webpack来说:

  • 出口文件必须是main.js
  • 假如未做相应的配置文件配置，src下的入口文件应该为index.js不能是其他名字的文件（这也是个大坑，一开始我就一脚踩了进去）