1. 程式人生 > >webpack 4版本

webpack 4版本

back serve ant nbsp object instance mit source eth

webpack4.2版本 在沒有寫配置的時候 直接打包一個文件 如果是在本地安裝 需要將文件目錄進入到安裝包的bin文件 然後執行webpack

比如 node_modules\.bin\webpack src/entery.js 就會生成一個list文件夾 裏面的main.js 就是打包好的文件

    多對多

  技術分享圖片

    多對一

  技術分享圖片

    一對一

  技術分享圖片   技術分享圖片

   webpack-dev-server 熱更新      

  style-loader     處理css中的url  

  css-loader    對CSS的樣式處理

  file-loader      //解決圖片打包後路徑不相同的問題

  url-loader   如果圖片的字節大於limit就拷貝圖片生成一個路徑, 小於limit就生成一個base64的圖片在js裏展示

  uglifyjs-webpack-plugin      js壓縮插件      不需要安裝

  html-webpack-plugin      html文件打包    會自動引入js文件

  extract-text-webpack-plugin     css分離     使用出口的oublicPath解決圖片打包路勁引用問題

module.exports = {   module: {
    rules: [ {       test: /\.css$/,   use: ExtractTextPlugin.extract({        fallback: "style-loader",     use: "css-loader"      })    } ]   },   plugins: [     new ExtractTextPlugin("styles.css"),    ] }

  

webpack 4版本