• 環境搭建

系統mac

使用npm install webpack -g 安裝webpack

• 項目創建

mkdir demo && cd demo

npm init? 如圖

創建項目內容，在項目根目錄創建個src文件夾

mkdir src && cd src

添加兩個文件a.js 和入口文件index.js

echo "console.log('this is a.js')" >a.js
echo "require('./a.js');\nconsole.log('this is index.js')" >index.js

回到項目根目錄，創建webpack 配置文件? webpack.config.js

var webpack = require('webpack') var path =require('path') var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = {entry:{app:path.join(__dirname,'src','index.js') //指定入口文件，若有多個入口，則使用鍵值對定義},output:{filename:'[name]-[hash].js', //輸出文件名，【name】為entry定義的鍵，可用自動生成文件的hash值，若不更改內容則hash不變path:path.join(__dirname,'dist')//輸出目錄 },

plugins:[
new webpack.BannerPlugin('版權所有，翻版必究'),
new webpack.HotModuleReplacementPlugin(), //熱替換插件
new HtmlWebpackPlugin({ template:'./index.html'}), //html插件，可用指定模板
new webpack.optimize.OccurrenceOrderPlugin()
]

}

?

打包項目

執行指令webpack 會自動檢測執行目錄下的webpack.config.js 配置文件

結果如圖

運行項目

還需添加webpack-dev-server 的依賴

npm i webpack-dev-server -D //-D 等價于--save-dev

并追加webpack配置文件關于devserver的配置

devServer: {contentBase: path.join(__dirname, "dist"), //webpack-dev-server運行時的根目錄// stats: "errors-only", //編譯時，輸出面板輸出內容的過濾狀態inline:true, //內容更改時，自動顯示在瀏覽器hot:true //熱替換}

執行./node_modules/.bin/webpack-dev-server

結果如圖

最終項目結構如圖

?

轉載于:https://www.cnblogs.com/HansonYao/p/webpack-init.html

總結

以上是生活随笔為你收集整理的webpack初体验的全部內容，希望文章能夠幫你解決所遇到的問題。

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