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

廢話不多，現在開始講述下webpack環境的搭建吧。

1.首先我們把webpack環境搭好：

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

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

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

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

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

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技術，而是會基于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 }

謝謝你閱讀我的文章~

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。