現(xiàn)如今，webpack已經(jīng)快速進入前端開發(fā)人員的眼線(從1.0到4.X的版本的更新迭代)，給前端開發(fā)也帶來了很大的突破，webpack可以分析項目結(jié)構(gòu)，模塊化打包機，處理模塊化依賴，轉(zhuǎn)換成瀏覽器可運行代碼。

廢話不多，現(xiàn)在開始講述下webpack環(huán)境的搭建吧。

1.首先我們把webpack環(huán)境搭好：

在工程文件創(chuàng)建一個文件夾，通過git打開控制臺，輸入npm init.回車。

根據(jù)提示，對創(chuàng)建的工程文件進行命名，描述等(這里也可以一直敲回車，后續(xù)在文件夾中更改)，創(chuàng)建成功之后會在剛剛創(chuàng)建的文件夾中多出一個package.json文件(注意文件的name一定不能用默認的webpack)，

然后在通過npm install 安裝工程依賴，初始化項目的話用npm install webpack webpack-cli -D命令，這樣webpack的項目已經(jīng)基本搭建完成了。

2.接下來我們看看webpack的配置問題：

webpack需要在項目根目錄下創(chuàng)建一個webpack.config.js文件，通過該配置文件來導(dǎo)出webpack的配置，webpack的配置多樣化，可以自己定制，現(xiàn)在來看看最基本的配置。

1 module.exports ={2 　　entry : './src/index.js',

3 output: {4 　　　　path : path.join(__dirname,'./dist'),5 　　　　filename : 'main.js'

6 }7 }

entry : 代表入口，webpack會找到該文件進行解析

output ：代表輸入文件配置

path : 把打包后的文件存放的位置

filename : 輸出文件的名字

有時候我們所建的項目并不是基于spa技術(shù)，而是會基于nuxt.js的多頁面，需要生成多個html，js文件，那么我們就可能需要配置多個入口。代碼如下：

1 module.exports ={2 entry : {3 pageA : './src/pageA.js',4 pageB : './src/pageB.js'

5 },6 output : {7 path : path.join(__dirname,'./dist'),

8 filename : '[name].[hash:8].js'

9 }10 }

謝謝你閱讀我的文章~

總結(jié)

以上是生活随笔為你收集整理的git 创建webpack项目_webpack项目的搭建及环境构建的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。