那么让我们一步一步开始
首先是 新建出 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 打包就完成了, 接下来开始扩展
