最近跟著技術(shù)胖進(jìn)行學(xué)習(xí)，這些是學(xué)習(xí)過(guò)程中的筆記，這是webpack3.X的第3篇筆記。
消除無(wú)用的css
使用purifyCSS可以大大減少css的冗余
1.安裝的命令：安裝的webpack的插件
Npm I -D purifycss-webpack purify-css
-D代表的是-save-dev,只是一個(gè)簡(jiǎn)寫(xiě)
2.引入glob（因?yàn)橐獧z查html模板）
在webpack.config.js文件頭引入glob
Const glob = require('glob');
3.引入purifycss-webpack
Const PurifyCSSPlugin = requrie('purifycss-webpack')
4.配置plugins
在引入完成后，在webpack.config.js里配置plugins,代碼如下：
plugins:[
//new uglify()
new htmlPlugin({
minify:{
removeAttrubuteQuotes:true
},
hash:true,
template:'./src/index.html'
}),
new extractTextPlugin("css/index.css"),
new PurifyCSSPlugin({
// Give paths to parse for rules. These should be absolute!
paths: glob.sync(path.join(__dirname, 'src/*.html')),
})
]
這里配置一個(gè)paths,主要的是需要找html模板，purifycss根據(jù)這個(gè)配置會(huì)遍歷你的文件，查找哪些css被使用
注意：使用這個(gè)自動(dòng)消除css的插件必須配合extract-text-webpack-plugin這個(gè)插件使用。
babel轉(zhuǎn)化成ES6
Babel 使用基于js進(jìn)行了擴(kuò)展的語(yǔ)言，比如React的JSX
1.安裝依賴(lài)包：
Cnpm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
2.在webpack中配置babel的方法如下：
{
test:/\.(jsx|js)$/,
use:{
loader:'babel-loader',
options:{
presets:[
"es2015","react"
]
}
},
exclude:/node_modules/
}
3.entry.js的代碼：
importcss from './css/index.css';
{
let jspangString = 'Hello Webpack'
document.getElementById('title').innerHTML=jspangString;
}
4..babelrc配置
在項(xiàng)目根目錄新建.babelrc 文件，并把配置寫(xiě)到文件里
{
"presets":["react","es2015"]
}
5..webpack.config.js里的loader配置
{
test:/\.(jsx|js)$/,
use:{
loader:'babel-loader',
},
exclude:/node_modules/
}
6.ENV
安裝npm install --save-dev babel-preset-env
然后修改.babelrc里的配置文件：
{
"presets":["react","env"]
}
打包后調(diào)試
Source-map 獨(dú)立 map 行 列
Cheap-moudle-source-map 獨(dú)立 行 不包括列
Eval-source-map eval? js? 開(kāi)發(fā)階段 上線(xiàn) 行 列
Cheap-moudle-eval-source-map 列
開(kāi)發(fā)和生產(chǎn)環(huán)境并行
開(kāi)發(fā)環(huán)境
生產(chǎn)環(huán)境
模塊化配置
js的模塊化跟webpack的模塊化原理是一樣的
打包第三方類(lèi)庫(kù)：
1.安裝Jquery
Npm install --save jquery
2.修改entry.js 文件
Import $ from 'jquery';
這里引入是不需要寫(xiě)相對(duì)路徑的，因?yàn)閖query的包是在node_modules里的，只要寫(xiě)一個(gè)名jquery,系統(tǒng)會(huì)自動(dòng)為我們查找的
引入好后我們就可以在entry.js 里使用jquery：
$('#title').html('hello JSpang')；
另外用plugin引入
安裝：
在webpack.config.js中引入webpack
Const webpack = require('webpack');
引入成功后配置我們的plugins模塊：
Plugins:[
New webpack.ProvidePlugin({
$:"jquery"
})
]
watch 的正確使用方法
watch的配置：
1.在webapck.config.js文件下配置：
watchOptions:{
//檢測(cè)修改的時(shí)間，以毫秒為單位
poll:1000,
//防止重復(fù)保存而發(fā)生重復(fù)編譯錯(cuò)誤。這里設(shè)置的500是半秒內(nèi)重復(fù)保存，不進(jìn)行打包操作
aggregeateTimeout:500,
//不監(jiān)聽(tīng)的目錄
ignored:/node_modules/,
}
2.使用命令進(jìn)行打包：
Webpack --watch
版權(quán)插件：BannerPlugin
在js文件里面配置：
1.new webpack.BannerPlugin("版權(quán)歸小胖籽所有")
2.在引入使用這個(gè)插件之前必須是引入webpack
Const webpack = require("webpack");
抽離第三方類(lèi)庫(kù)
1.修改入口文件在webpack.config.js修改：
Entry：{
Entry:'/src/entry.js',
Jquery:'jquery'
},
2.引入optimize插件
new webpack.optimize.CommonsChunkPlugin({
//name對(duì)應(yīng)入口文件中的名字，我們起的是jQuery
name:'jquery',
//把文件打包到哪里，是一個(gè)路徑
filename:"assets/js/jquery.min.js",
//最小打包的文件模塊數(shù)，這里直接寫(xiě)2就好
minChunks:2
}),
配置完成后，我們可以先刪除以前打包的dist目錄，然后用webpack再次打包，你會(huì)發(fā)現(xiàn)jquery被抽離出來(lái)，entry.js文件也變小了。
多個(gè)第三方類(lèi)庫(kù)抽離
1.先用npm進(jìn)行安裝
Npm install vue --save
注意這里是--save 而不是-save-dev，因?yàn)関ue在生產(chǎn)環(huán)境下也使用到
2.在入口配置中引入vue和jquery
Entry：{
Entry:'/src/entry.js',
Jquery:'jquery',
vue:'vue'
},
3.修改CommonsChunkPlugin配置
new webpack.optimize.CommonsChunkPlugin({
//name對(duì)應(yīng)入口文件中的名字，我們起的是jQuery
name:['jquery','vue'],
//把文件打包到哪里，是一個(gè)路徑
filename:"assets/js/[name].js",
//最小打包的文件模塊數(shù)，這里直接寫(xiě)2就好
minChunks:2}),
配置好以后依然直接webpack打包一下，就會(huì)發(fā)現(xiàn)jquery和vue都被我們分離出來(lái)
集中拷貝靜態(tài)資源
這下面的3步都是在webpack.config.js文件下進(jìn)行配置的
使用copy-webpack-plugin
1.插件安裝：
Cnpm install --save-dev copy-webpack-plugin
2.引入插件
Const CopyWebpackPlugin = require('copy-webpack-plugin')
3.配置插件
new copyWebpackPlugin([{
from:__dirname+'/src/public',
to:'./public'
}])
配置好之后，我們進(jìn)行webpack打包就可以了，打包完成后會(huì)看到你靜態(tài)文件已經(jīng)打包到dist文件中了
Json配置文件使用
在webpack1和webpack2里面，你需要引入一個(gè)json-loader的loader進(jìn)來(lái)，但是在webpack3,你就不需要另外引入了
讀出json內(nèi)容：
第一步：現(xiàn)在我們的index.html模板中加入一個(gè)層，并給層一個(gè)Id，為了是在javascript代碼中可以方便引用。
第二步：到src文件夾下，找到入口文件，我這里是entry.js文件。修改里邊的代碼，如下：
var json =require('../config.json');
document.getElementById("json").innerHTML= json.name;
這兩行代碼非常簡(jiǎn)單，第一行是引入我們的json文件，第二行駛寫(xiě)入到到DOM中。
第三部：?jiǎn)⒂梦覀兊膎pm run server命令就可以在瀏覽器中看到結(jié)果了。
熱更新
其實(shí)在webpack3中啟用熱加載相當(dāng)?shù)娜菀?，只要加入HotModuleReplacementPlugin這個(gè)插件就可以了。
new webpack.HotModuleReplacementPlugin()
現(xiàn)在只要你啟動(dòng)npm run server后，修改index.html中的內(nèi)容，瀏覽器可以自動(dòng)給我們更新出最新的頁(yè)面。
