webpack

1，打包樣式資源
以css/less/sass結尾的就是樣式資源
處理樣式資源是通過loader進行處理
下載資源：
npm i style-loader -D //在html文件中生成style標簽并將其插入head標簽中
npm i css-loader -D //將打包后中的js文件中的樣式資源，轉化為css字符串
npm i less-loader -D //將less資源以commonjs格式壓縮在打包后的js文件中
npm i sass-loader -D //將sass資源以commonjs格式壓縮在打包后的js文件中

2，打包html資源
處理html文件打包，是通過插件來進行處理
下載資源：
npm i html-webpack-plugin -D

3，打包圖片資源
處理圖片資源是通過loader進行處理
npm i url-loader -D

4，打包其他資源
處理其他資源是通過loader進行處理
npm i file-loader -D

5，配置devServer本地服務器
在webpack.config.js 文件中的devServer下進行配置
作用：
devserver本地服務器是方便開發，使用gzip壓縮，在內存中進行壓縮文件，不會在項目中生成本地的代碼，實現了自動打包的功能（修改代碼后無需手動再次打包），也可以自動打開瀏覽器查看編譯效果。
下載資源：
npm i webpack-dev-server -D

具體代碼：

//利用node 中的模塊獲得絕對路徑 const {resolve}=require('path'); const HtmlWebPackPlugin=require('html-webpack-plugin')module.exports={entry:'./src/index.js',output:{//打包后的文件名filename:'built.js',//打包后文件的路徑path:resolve(__dirname,'build')},module:{rules:[//詳細的loader配置,處理一種情況，就得添加一個相對應的對象{test:/\.css$/,//當需要依賴多個loader時使use數組，只需要使用一個時使用loader標簽use:[//創建一個style標簽，將js中的樣式資源插入并添加到head標簽中'style-loader',//將css文件變成commonjs模塊加載到js中，里面的內容是樣式字符串'css-loader']},{test:/\.less$/,use:['style-loader','css-loader','less-loader']},{//處理圖片資源test:/\.(jpg|png|gif)$/,loader:'url-loader',options:{//處理最小的圖片資源的大小，小于8*1024 的圖片資源不進行處理，將采用base64 處理limit:8*1024,//關閉es6模塊化編寫，webpack采用的是nodejs中的commonjs編寫風格esModule:false}},{//處理html中的img鏈接圖片,url-loader處理不了鏈接圖片test:/\.html$/,loader:'html-loader'},{//處理其他資源，exclude表示除了這些資源之外的其他文件，include表示只處理這里面的文件exclude:/\.(html|js|less|jpg|png|gif)$/,loader:'file-loader'}]},plugins:[//插件配置new HtmlWebPackPlugin({//打包html文件，并以template下的html文件為模板生成一個引入了打包后的js文件的html文件template:'./src/index.html'})],devServer:{//指定項目打包后的文件目錄contentBase:resolve(__dirname,'build'),compress:true,//端口號port:3000,//自動打開瀏覽器open:true},//指示打包為開發環境打包mode:'development' }

總結

以上是生活随笔為你收集整理的webpack(2)--开发环境基本配置的全部內容，希望文章能夠幫你解決所遇到的問題。

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