webpack 单入口项目基础配置教程(二)

那么让我们一步一步开始

首先是 新建出 package.json 文件

自己先找个空文件夹, 在这个文件夹的路径下 cmd 或者 git bash 之类的命令行工具输入下面的指令

yarn init -y

package.json 就当它是个包管理工具的描述文件

我们用 npm 或者 yarn 都需要有这个文件来描述我们的项目依赖哪些第三方库/插件, 有什么自定义指令等等

所以我这里虽然用了 yarn 但是用 npm init -y 的话也是同样的效果和作用

---

之后我们就要在项目里安装 webpack 了

yarn add webpack --dev

我这里并没有指定版本, 是希望这套实例里的操作可以尽量无视版本通用

如果有坑 关我屌事(随缘去填)

---

在当前路径下新建 webpack.config.js 文件

项目结构应该如下

• my-webpack
  • package.json
  • webpack.config.js
  • yarn.lock
  • /node_modules

webpack.config.js 内容如下

const path = require('path');

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'app.js'
    }
};

指定了入口文件的路径 打包出口的路径 还有打包后文件的文件名

---

所以我们现在要建立 src 文件夹还有 app.js 文件了

项目结构应该如下

• my-webpack
  • package.json
  • webpack.config.js
  • yarn.lock
  • /node_modules
  • /src
    • app.js

app.js 内容如下

console.log('hello webpack')

---

接着开始我们首次运行 webpack 打包命令了

在 cmd / git bash / terminal 里输入如下指令

webpack

但是这个时候 windows 环境里可能会碰到提示 webpack 不是内部或外部命令,
或者 bash: webpack: command not found 之类的报错



这里我们就解决掉 同时这个解决方法也是解决 webpack 多版本共存问题 的方法



在 cmd / git bash / terminal 里重新输入如下指令

node_modules/.bin/webpack

之后这类操作统称为输入指令

上面这个指令的意思是

在当前项目安装的包管理文件夹 (node_modules) 里找到 bin 文件夹, 然后运行里面的本地 webpack 指令


首先这就保证了你的 webpack 打包指令可以顺利执行


其次, 假如你的电脑之前全局安装过 webpack 1.0 版本, 但是你的当前项目要保证用到 webpack 3.0 以上版本而不被全局环境下的 1.0 版本覆盖, 这条指令同样作用于此

这里还有一个坑, 就是可能因为版本问题

提示你要安装 webpack-cli

The CLI moved into a separate package: webpack-cli.
Please install 'webpack-cli' in addition to webpack itself to use the CLI.
-> When using npm: npm install webpack-cli -D
-> When using yarn: yarn add webpack-cli -D

没啥好说的, 装就是了

yarn add webpack-cli -D

webpack 打包成功之后你应该会在项目里发现新增了 dist 文件夹

项目结构应该如下

• my-webpack
  • package.json
  • webpack.config.js
  • yarn.lock
  • /node_modules
  • /src
    • app.js
  • /dist
    • app.js

那么基本的 webpack 打包就完成了, 接下来开始扩展