webpack基础第一篇（配置文件）
生活随笔
收集整理的這篇文章主要介紹了
webpack基础第一篇（配置文件）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.安裝mode.js、npm本地環境，lue
2.命令語言
? ? ? ?mkdir ?webpack_demo ?//建立文件夾
? ? ? ?cd ?webpack_demo ?//進入文件夾
npm install -g webpack ?//全局安裝webpack
npm init ?//初始化
npm install --save-dev webpack //安裝目錄
3.建立項目基本結構
src文件夾 ----存放編寫的源碼
dist文件夾 ----存放webpack打包后的文件
dist下建立index.html文件，代碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>jspang webpack</title> </head> <body><div id="title"></div><script src="./bundle.js"></script> </body> </html>src下建立entry.js文件，代碼如下：
document.getElementById('title').innerHTML='Hello Webpack';4.配置文件
項目根目錄下創建webpack.config.js文件，代碼如下：
const path = require('path'); module.exports={//入口文件的配置項 entry:{//里面的entery是可以隨便寫的entry:'./src/entry.js'},//出口文件的配置項 output:{//打包的路徑文職path:path.resolve(__dirname,'dist'),//打包的文件名稱filename:'bundle.js'},//模塊：例如解讀CSS,圖片如何轉換，壓縮 module:{},//插件，用于生產模版和各項功能 plugins:[],//配置webpack開發服務功能 devServer:{} }如果需要多入口，多出口文件我們只需要做如下修改：
const path = require('path'); module.exports={//入口文件的配置項 entry:{entry:'./src/entry.js',//這里我們又引入了一個入口文件entry2:'./src/entry2.js'},//出口文件的配置項 output:{//輸出的路徑，用了Node語法path:path.resolve(__dirname,'dist'),//輸出的文件名稱filename:'[name].js'},//模塊：例如解讀CSS,圖片如何轉換，壓縮 module:{},//插件，用于生產模版和各項功能 plugins:[],//配置webpack開發服務功能 devServer:{} }在入口文件配置中，增加了一個entry2.js的入口文件（這個文件你需要自己手動建立），這時候要打包的就有了兩個入口文件。在代碼14行我們把原來的bundle.js修改成了[name].js
待續。。。
轉載于:https://www.cnblogs.com/xiaomingge/p/7986246.html
總結
以上是生活随笔為你收集整理的webpack基础第一篇（配置文件）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ●BZOJ 4556 [Tjoi2016
- 下一篇： beta阶段第二次scrum meeti