webpack 4版本

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分離 　　　　使用出口的publicPath解決圖片打包路勁引用問題  

 

module.exports = {

　　module: {

　　　　rules: [ {

　　　　　　test: /\.css$/,

　   use: ExtractTextPlugin.extract({

　　　　　　 fallback: "style-loader",

          　　　  use: "css-loader"

      　　　　  })

     　　 } ]

　　},

　　plugins: [

　　　　new ExtractTextPlugin("styles.css"),

　　 ]

} 

　　　　extract-text-webpack-plugin目前版本不支持webpack4。 

　　　　使用最新beta版  npm install extract-text-webpack-plugin@next

　　

　　html-withimg-loader　　　　　　html中的圖片打包

　　less　　　　　　　　　　　　

　　less-loader

 

　　node-sass 

　　sass-loader

　　

　　postcss-loader

　　autoprefixer　　　　自動添加css前綴

 

　　purify-css

　　purifycss-webpack　　　　　消除沒有用到的css　　　依賴於purify-css    需要使用html-webpack-plugin插件 可能會報錯

 

　　babel-core　　　　　　babel核心包　　　　

　　babel-loader　　　　  　　給webpack使用的 babel-loader8.0以上版本  需要安裝新版@babel/core  和@babel/preset-env  .babelrc配置文件也要使用@babel/preset-env

　　babel-preset-2015　　　　

　　babel-preset-react    　　　　需要支持react就要使用這個包

　　babel-preset-env　　　　　　轉化es6 es7　　　　

 

　　source-map　　　　　　　　　　獨立文件 map 有行和列提示

　　cheap-moudle-source-map　　　　獨立文件 有提示行

　　eval-source-map　　　　　　開發階段使用  有行和列  

　　cheap-moudle-eval-source-map　　　　只有列

 

　　ProvidePlugin   在plugin中引用第三方類庫  比如jquery   需要引入webpack  這是webpack自帶的屬性

　　watchOptions     --watch配置項

　　copy-webpack-plugin     靜態資源打包