webpack3整理（第二節/滿三節）

消除未使用的CSS:安裝PurifyCSS-webpack插件
cnpm i purifycss-webpack purify-css -D
const glob = require('glob');
const PurifyCSSPlugin = require("purifycss-webpack");
plugins:[
    new extractTextPlugin("css/index.css"),  //這裏的/css/index.css是分離後的路徑位置
    new PurifyCSSPlugin({
        paths: glob.sync(path.join(__dirname, 'src/*.html')),
        })
]
註明:這裏配置了一個paths，主要是需找html模板，purifycss根據這個配置會遍歷你的文件，查找哪些css被使用了。 使用這個插件必須配合extract-text-webpack-plugin這個插件。 ---------------------------------------------------------------------------------------------- Babel的安裝與配置
cnpm install babel-core babel-loader babel-preset-es2015 babel-preset-react -D
註明:babel-preset-react(解析jsx語法的包vue能夠不裝)
配置:
{
    test:/\.(jsx|js)$/,
    use:{
        loader:'babel-loader',
        options:{
            presets:[
                "es2015","react"
            ]
        }
    },
    exclude:/node_modules/
}

雖然Babel能夠直接在webpack.config.js中進行配置，可是考慮到babel具備很是多的配置選項， 若是卸載webapck.config.js中會很是的雍長不可閱讀，因此咱們常常把配置卸載.babelrc文件裏。 ---------------------------------------------------------------------------------------------- .babelrc配置

{
  "presets":["react","es2015"]
}

loader配置可更改成:
{
    test:/\.(jsx|js)$/,
    use:{
        loader:'babel-loader',
    },
    exclude:/node_modules/
}
如今網絡上已經不流行babel-preset-es2015官方推薦使用的是babel-preset-env
cnpm install  babel-preset-env -D
{
    "presets":["react","env"]
}
在實際工做中仍是要安裝Babel的，這樣能更好的兼容每種瀏覽器，把Babel的配置文件分解出來是最好的選擇。 ---------------------------------------------------------------------------------------------- 開發環境和測試環境的差別性
一個項目中是有開發環境和生產環境的，這兩個環境的依賴也是不一樣的:
開發依賴：只在開發中用來幫助你進行開發，簡化代碼或者生成兼容設置的以來包。你能夠打開package.json來查看，devDependencies的下面的這些包爲開發使用的包。這些包在生產環境中並無用處。
生產依賴：就是好比咱們的js使用了jquery，jquery的程序要在瀏覽器端起做用，也就是說咱們最終的程序也須要這個包，這就是生產依賴。這些包在dependencies中。

npm安裝/cnpm安裝(cnpm方便快捷求穩的話建議npm)
第一種：
npm install jquery //不建議的安裝方式
第二種：（-S是簡寫方式安裝）
npm install jquery --save //安裝完成後，它存在於package.json的dependencies中，也就是說它是生產環境須要依賴的包（上線時須要的以來包）。
第三種：（-D是簡寫方式安裝）
npm install jquery --save-dev //安裝完成後，它存在於package.json的devDependencies中，也就是說它是開發環境中須要的，上線並不須要這個包的依賴。
---------------------------------------------------------------------------------------------- JS中的模塊化實現 webpack模塊 function gogo(){
  alert('hello:'+'webpack');
}
module.exports=gogo;
優雅打包第三方類庫 ProvidePlugin是一個webpack自帶的插件
plugins:[
    new webpack.ProvidePlugin({
        $:"jquery"
    })
]
BannerPlugin插件使用後會在JS中加上咱們的版權或開發者聲明 watch的配置:(在webpack.config.js中和入口出口同一個文件裏面配置)
watchOptions:{
    //檢測修改的時間，以毫秒爲單位
    poll:1000, 
    //防止重複保存而發生重複編譯錯誤。這裏設置的500是半秒內重複保存，不進行打包操做
    aggregateTimeout:500, 
    //不監聽的目錄
    ignored:/node_modules/, 
}

後端與前端聯調，咱們不須要每一次都去打包，這樣特別麻煩，咱們但願的場景是，每次按保存鍵，webpack自動爲咱們打包。 ---------------------------------------------------------------------------------------------- 單個/多個第三方類庫抽離
1、安裝第三方類庫如jq，vue，swiper等等
2、修改入口文件
entry:{
    entry:'./src/main.js',
    jquery:'jquery',
    vue:'vue'
},
3、修改CommonsChunkPlugin配置
須要修改兩個位置：
第一個是在name屬性裏把原來的字符串(單個第三方庫)改成數組（多個第三方庫），由於咱們要引入多個模塊，因此是數組；
第二個是在filename屬性中把咱們輸出的文件名改成匹配付[name],這項操做就是打包出來的名字跟隨咱們打包前的模塊。
單個第三方庫配置: new webpack.optimize.CommonsChunkPlugin({
    //name對應入口文件中的名字，咱們起的是jQuery
    name:'jquery',
    //把文件打包到哪裏，是一個路徑
    filename:"assets/js/jquery.min.js",
    //最小打包的文件模塊數，這裏直接寫2就好
    minChunks:2
})
多個第三方庫配置: new webpack.optimize.CommonsChunkPlugin({
    //name對應入口文件中的名字，咱們起的是jquery
    name:['jquery','vue'],
    //把文件打包到哪裏，是一個路徑
    filename:"assets/js/[name].js",
    //最小打包的文件模塊數，這裏直接寫2就好
    minChunks:2
})
---------------------------------------------------------------------------------------------- 靜態資源集中輸出（項目中沒有引用的圖片資源或者其餘靜態資源） 使用copy-webpack-plugin插件
cnpm install --save-dev copy-webpack-plugin
在webpack.config.js引入
const copyWebpackPlugin= require("copy-webpack-plugin");
配置:
new copyWebpackPlugin([{
        from:__dirname+'/src/public',
        to:'./public'
    }])
from:要打包的靜態資源目錄地址，這裏的__dirname是指項目目錄下，是node的一種語法，能夠直接定位到本機的項目目錄中。
to:要打包到的文件夾路徑，跟隨output配置中的目錄。因此不須要再本身加__dirname。

new webpack.HotModuleReplacementPlugin()熱更新插件就能夠實現熱加載