深入前端模塊自動(dòng)化打包工具課件2 webpack2

WebPack2妙味課堂-zMouseWebPack2JavaScript應(yīng)用程序的模塊打包器(modulebundler)WebPack2WebPack2模塊化ES5模塊化require.jssea.jsWebPack2import導(dǎo)入一個(gè)模塊語法：WebPack2export導(dǎo)出一個(gè)模塊語法：WebPack2第一個(gè)ES6模塊化創(chuàng)建html文件加載入口文件<scriptsrc=“main.js”></script>引入第一個(gè)模塊importvfrom“./m1”導(dǎo)出第一個(gè)模塊接口exportvarv=100;WebPack2安裝全局安裝webpacknpminstall-Swebpacknpminstall-gwebpackWebPack2配置文件webpack.config.js運(yùn)行webpack命令的時(shí)候加載的配置文件，當(dāng)webpack命令運(yùn)行的時(shí)候，會(huì)加載該文件，根據(jù)該文件的配置內(nèi)容進(jìn)行執(zhí)行。module.exports={}WebPack2核心概念入口（Entry）出口（Output）加載器（Loader）插件（Plugins）WebPack2入口（Entry）入口文件是整個(gè)應(yīng)用程序的執(zhí)行起點(diǎn)，webpack會(huì)從入口文件開始分析文件模塊之間的依賴，并加載，然后打包成一個(gè)文件。一、單個(gè)入口二、多入口WebPack2輸出（Output）配置webpack如何向硬盤中寫入文件，注意：入口可以多個(gè)，但是輸出配置只能有一個(gè)，配置值為一個(gè)對(duì)象格式：必要的兩個(gè)output配置pathfilename單入口文件多入口文件[name]WebPack2加載器（Loader）Loader是webpack中用于處理任務(wù)的核心內(nèi)容，他是一個(gè)文件內(nèi)容預(yù)處理器，我們可以通過Loader來處理和轉(zhuǎn)換指定的文件，比如把TypeScript轉(zhuǎn)成JavaScript，圖片轉(zhuǎn)成DataURL等。在webpack對(duì)文件進(jìn)行打包之前執(zhí)行。

Loaders-文件raw-loader-加載文件原始內(nèi)容-加載指定文件，并以字符串的形式返回內(nèi)容Loaders-文件json-loader-加載JSON文件-加載指定JSON數(shù)據(jù)文件，并以對(duì)象（解析后的JSON數(shù)據(jù)）的形式返回-webpack2.0以后已經(jīng)內(nèi)置了json-loader，和對(duì).json后綴的文件的處理，所以可以不需要下載json-loader與配置-針對(duì)非.json后綴的，還是需要單獨(dú)在rules中配置，但是不需要下載json-loader了Loaders-文件file-loader-生成文件到指定目錄，并根據(jù)配置返回訪問路徑-默認(rèn)生成的新文件的名稱為原文件的MD5值Loaders-轉(zhuǎn)換編譯babel-loader-加載ES2015+代碼，然后使用Babel轉(zhuǎn)譯為ES5npmi-Dbabel-loaderbabel-corebabel-preset-envwebpack{test:/\.js$/,use:{loader:'babel-loader',options:{

presets:['env']}}}Loaders-樣式css-loader-解析CSS文件后，使用import加載，并且返回CSS代碼style-loader-將模塊的導(dǎo)出作為樣式添加到DOM中Loaders-框架vue-loader-加載和轉(zhuǎn)譯Vue組件Plugins插件-在webpack預(yù)處理、打包完成后執(zhí)行

PluginsUglifyjsWebpackPlugin-壓縮文件npmi-Duglifyjs-webpack-pluginconstUglifyJSPlugin=require(‘uglifyjs-webpack-plugin’)module.exports={plugins:[newUglifyJSPlugin()]}PluginsExtractTextPlugin-提取分離成獨(dú)立的css文件npmi-Dextract-text-webpack-pluginconstExtractTextPlugin=require(“extract-text-webpack-plugin");module.exports={module:{rules:[{test:/\.css$/,use:ExtractTextPlugin.extract({fallback:"style-loader",use:"css-loader"})}]},plugins:[newExtractTextPlugin("styles.css"),]}PluginsProvidePlugin-自動(dòng)加載模塊，而不必到處import或requiremodule.exports={plugins:[newwebpack.ProvidePlugin({$:‘jquery',jQuery:‘jquery'})]}PluginsCommonsChunkPlugin-提取chunks之間共享的通用模塊module.exports={plugins:[newwebpack.optimize.CommonsChunkPlugin({name:‘verdor’})]}模塊熱替換webpack-dev-server-npmi-Dwebpack-dev-servercontext:__dirname,entry:[ './src/app.js', './node_modules/webpack-dev-server/client/index.js?']constWebpack=require("webpack");constWebpackDevServer=require("webpack-dev-server/lib/Server");constwebpackConfig=require("./webpack.config");constcompiler