那么讓我們一步一步開(kāi)始
首先是 新建出 package.json 文件
自己先找個(gè)空文件夾, 在這個(gè)文件夾的路徑下 cmd 或者 git bash 之類的命令行工具輸入下面的指令
yarn init -y
package.json 就當(dāng)它是個(gè)包管理工具的描述文件
我們用 npm 或者 yarn 都需要有這個(gè)文件來(lái)描述我們的項(xiàng)目依賴哪些第三方庫(kù)/插件, 有什么自定義指令等等
所以我這里雖然用了 yarn 但是用 npm init -y 的話也是同樣的效果和作用
之后我們就要在項(xiàng)目里安裝 webpack 了
yarn add webpack --dev
在當(dāng)前路徑下新建 webpack.config.js 文件
項(xiàng)目結(jié)構(gòu)應(yīng)該如下
- my-webpack
- package.json
- webpack.config.js
- yarn.lock
- /node_modules
webpack.config.js 內(nèi)容如下
const path = require('path');
module.exports = {
entry: './src/app.js',
output: {
path: path.join(__dirname, 'dist'),
filename: 'app.js'
}
};
指定了入口文件的路徑 打包出口的路徑 還有打包后文件的文件名
所以我們現(xiàn)在要建立 src 文件夾還有 app.js 文件了
項(xiàng)目結(jié)構(gòu)應(yīng)該如下
- my-webpack
- package.json
- webpack.config.js
- yarn.lock
- /node_modules
- /src
- app.js
app.js 內(nèi)容如下
console.log('hello webpack')
接著開(kāi)始我們首次運(yùn)行 webpack 打包命令了
在 cmd / git bash / terminal 里輸入如下指令
webpack
但是這個(gè)時(shí)候 windows 環(huán)境里可能會(huì)碰到提示 webpack 不是內(nèi)部或外部命令,
或者 bash: webpack: command not found 之類的報(bào)錯(cuò)
這里我們就解決掉 同時(shí)這個(gè)解決方法也是解決 webpack 多版本共存問(wèn)題 的方法
在 cmd / git bash / terminal 里重新輸入如下指令
node_modules/.bin/webpack
之后這類操作統(tǒng)稱為輸入指令
上面這個(gè)指令的意思是
在當(dāng)前項(xiàng)目安裝的包管理文件夾 (node_modules) 里找到 bin 文件夾, 然后運(yùn)行里面的本地 webpack 指令
首先這就保證了你的 webpack 打包指令可以順利執(zhí)行
其次, 假如你的電腦之前全局安裝過(guò) webpack 1.0 版本, 但是你的當(dāng)前項(xiàng)目要保證用到 webpack 3.0 以上版本而不被全局環(huán)境下的 1.0 版本覆蓋, 這條指令同樣作用于此
這里還有一個(gè)坑, 就是可能因?yàn)榘姹締?wèn)題
提示你要安裝 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
沒(méi)啥好說(shuō)的, 裝就是了
yarn add webpack-cli -D
webpack 打包成功之后你應(yīng)該會(huì)在項(xiàng)目里發(fā)現(xiàn)新增了 dist 文件夾
項(xiàng)目結(jié)構(gòu)應(yīng)該如下
- my-webpack
- package.json
- webpack.config.js
- yarn.lock
- /node_modules
- /src
- app.js
- /dist
- app.js
那么基本的 webpack 打包就完成了, 接下來(lái)開(kāi)始擴(kuò)展
