http://blog.csdn.net/weizengxun/article/details/53448885
第一課，npm install --save-dev webpack //保存到我們的開發(fā)環(huán)境(dev)
1,如果安裝的時(shí)候報(bào)紅錯(cuò)誤产捞，（1利耍，看一下node版本是不是太低node -v? 2,網(wǎng)絡(luò)問題《可以用cnpm-------npm.taobao.org淘寶鏡像安裝》3巢掺，權(quán)限問題 ）
2利朵，如果webpack太老篮撑，然后可以把node_modules文件夾刪除了屁使，然后重新裝一次在岂，npm install --save-dev webpack
如果項(xiàng)目有很多依賴包了，那么先打開packgage.json蛮寂，把webpack的版本號(hào)改了保存洁段，然后再把node_modules文件夾刪除了再重新裝一次
第二課，快速上手一個(gè)demo:
? ? 1共郭，webpack 這里是編寫的js文件路徑+空格+這里是要編譯的文件路徑
? ? 2，可以安裝一個(gè)live-server來實(shí)時(shí)刷新查看結(jié)果（npm install -g live-server）--live-server執(zhí)行
第三課疾呻，入口和出口
webpack.config.js文件內(nèi)容
const path=require('path');? //絕對(duì)路徑
module.exports={
? ? entry:{
? ? ? ? entry:'./'除嘹，
? ? ? ? entry2:'' //可以多文件入口和出口
????},//入口文件地址
? ? output:{
? ? ? ? path:path.resolve(_dirname,'打包文件的父級(jí)名'),
? ? ? ? filename:'打包的文件名.js'
????} //出口文件打包壓縮后的文件
? ? module:{
? ? ? ? rules:[
????????????{
? ??????????????test:/\.css$/,
? ????????????? use:['style-loader','css-loader']
? ? ? ? ? ? ? }
????????]
????}//這里是編譯的，less,圖片之類
? ? plugins:[] //這里就是插件可以有多個(gè)
? ? devServer:{
? ? ? ? contentBase:path.resolve(__dirname,'dist'),
? ? ? ? host:'Ip地址' //不建議寫loacalhost有時(shí)映射不到
? ? ? ? compress:true,? //服務(wù)器端壓縮? ??
? ? ? ? port:1717? //端口號(hào)
????????} //配置開發(fā)服務(wù)
}
//查ip 地址? ipconfig
第四課岸蜗，服務(wù)和熱更新
首頁得配置webpack.config.js里的devServer項(xiàng)參考三
安裝? npm install webpack-dev-server --save-dev
(--save-dev只在開發(fā)中使用)
命令是安裝到node_modules所以終端是找不到的尉咕，所以得在webpack.config.js里更改配置
“scripts”:{
? ? 'server':'webpack-dev-server'
}
執(zhí)行用npm run server
第五課，打包c(diǎn)ss文件--loaders
在module里配置 璃岳，參考三
1年缎，建議css文件目錄,在js文件里引入css
import css from './css/index.css' （這里的路徑要是相對(duì)路徑)
2,需要安裝兩個(gè)css? (style-loader, css-loader)
npm install style-loader --save-dev? (路徑的處理)
npm install css-loader --save-dev （樣式標(biāo)簽的處理）
3悔捶，安裝好就可以在webpack.config.js里配置modul,參考三
?module:{
? ? ? ? rules:[
????????????{
? ????????????? test:/\.css$/,
? ????????????? use:['style-loader','css-loader'] 或
? ? ? ? ? ? ? ? loader:['style-loader','css-loader'],
? ??????????????use:[
? ? ? ? ? ? ? ? ? ? {loader:"style-loader"},
?????????????????????{loader:"css-loader"}
? ? ? ? ? ? ? ? ?]?
? ? ? ? ? ? ? }
????????]
????}
再啟動(dòng)服務(wù) npm run server
第六課，js代碼壓縮
引入一個(gè)插件uglify
1,在webpack.config.js里引入const uglifyaaa=require('uglifyjs-webpack-plugin');
2,在plugins:[
? ? new uglifyaaa();
]
第七課单芜，HTML文件的打包
1,在webpack.config.js里引入const htmlPlugin=require('html-webpack-plugin');
2,安裝npm install --save-dev html-webpack-plugin
3,在plugins:[
? ? new htmlPlugin({
? ? ? ? minify:{? //?minify壓縮
? ? ? ? ? ? removeAttributeQuotes:true //去掉屬性蜕该，把屬性引號(hào)去掉了
? ? ? ? ? },
????????hash:true,? //防止緩存，一般引入js會(huì)產(chǎn)生緩存洲鸠，這樣就不會(huì)有緩存了
????????template:'./src/index.html'? //模板打包成的樣式和路徑
????});
]
第八課堂淡，css中引用圖片
1，安裝組件file-loader? ?url-loader
npm install --save-dev file-loader url-loader
2,webpack.config.js里配置module
module:{
? ? ? ? rules:[
????????????{
? ????????????? test:/\.css$/,
? ????????????? use:['style-loader','css-loader']
? ? ? ? ? ? ? },{
? ? ? ? ? ? ? ? test:/\.(png|jpg|gif)/ ,
? ? ? ? ? ? ? ? use:[{
? ? ? ? ? ? ? ? ? ? loader:'url-loader',
? ? ? ? ? ? ? ? ? ? options:{
? ? ? ? ? ? ? ? ? ? ? ? limit:500000,
? ??????????????????????outputPath:'images/' //(打包出圖片在images文件夾里)
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }]
? ? ? ? ? ? }
????????]
????}
第九課扒腕，CSS分離和publicPath
插件 Extract Text Plugin
1,先安裝分離插件
npm install --save-dev extract-text-webpack-plugin(注意多加一個(gè)webpack)
2,webpack.config.js 中引入
const extractTextPlugin=require('extract-text-webpack-plugin')
3,在下面plugins里new?extractTextPlugin(打包的路徑)
new extractTextPlugin("/css/index.css")
4绢淀，這種打包分離需要解決的路徑問題，給一個(gè)公用publicPath路徑瘾腰，要在輸出output里面定義
var website={
? ? publicPath:"http://http://192.168.1.104:1717/"
}
output:{
? ? publicPath:website.publicPath
}
第十課皆的，HTML中的圖片打包 安裝loader
npm inatall --save-dev html-withimg-loader
webpack.config.js里寫配置
test:/\.(htm|html)$/i,
use:['html-withimg-loader']
第十一課，打包和分離LESS
1,首頁裝less? （npm install --save-dev less）
2,安裝less-loader(npm install --save-dev less-loader)
3.webpack.config.js配置文件
{
? ? test: /\.less$/,
? ? use: [{
? ? ? ? ? loader: "style-loader" // creates style nodes from JS strings
? ? ? ? }, {
? ? ? ? ? ? loader: "css-loader" // translates CSS into CommonJS
? ? ? ? , {
? ? ? ? ? ? loader: "less-loader" // compiles Less to CSS
? ? ? ? }]
}
引入到我們entery.js文件中
import less from './css/black.less';
4蹋盆，把Lees文件分離费薄。
{
????????????test: /\.less$/,
????????????use: extractTextPlugin.extract({
????????????????use: [{
????????????????????loader: "css-loader"
????????????????}, {
????????????????????loader: "less-loader"
????????????????}],
????????????????// use style-loader in development
????????????????fallback: "style-loader"
????????????})
}
第十二課,打包和分離SASS
npm install --save-dev node-sass
npm install --save-dev sass-loader
在js文件里引入scss文件
{
????????????????test: /\.scss$/,
????????????????use: [{
????????????????????loader: "style-loader" // creates style nodes from JS strings
????????????????}, {
????????????????????loader: "css-loader" // translates CSS into CommonJS
????????????????}, {
????????????????????loader: "sass-loader" // compiles Sass to CSS
????????????????}]
}
把SASS文件分離。
{
? ? ? ? ? ? test: /\.scss$/,
? ? ? ? ? ? use: extractTextPlugin.extract({
? ? ? ? ? ? ? ? use: [{
? ? ? ? ? ? ? ? ? ? loader: "css-loader"
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? loader: "sass-loader"
? ? ? ? ? ? ? ? }],
? ? ? ? ? ? ? ? // use style-loader in development
? ? ? ? ? ? ? ? fallback: "style-loader"
? ? ? ? ? ? })
}
第十三課怪嫌，postcss自動(dòng)添加CSS屬性前綴
https://github.com/postcss/postcss-loader
1,需要安裝兩個(gè)包postcss-loader 和autoprefixer（自動(dòng)添加前綴的插件）
npm install --save-dev postcss-loader autoprefixer
2,postCSS推薦在項(xiàng)目根目錄（和webpack.config.js同級(jí)）义锥，建立一個(gè)postcss.config.js文件。
3,postcss.config.js :
module.exports = {
? ? plugins: [
? ? ? ? require('autoprefixer')
? ? ]
}
4,對(duì)postcss.config.js配置完成后岩灭，我們還需要編寫我們的loader配置拌倍。
{
? ? ? test: /\.css$/,
? ? ? use: [
? ? ? ? ? ? {
? ? ? ? ? ? ? loader: "style-loader"
? ? ? ? ? ? }, {
? ? ? ? ? ? ? loader: "css-loader",
? ? ? ? ? ? ? options: {
? ? ? ? ? ? ? ? modules: true
? ? ? ? ? ? ? }
? ? ? ? ? ? }, {
? ? ? ? ? ? ? loader: "postcss-loader"
? ? ? ? ? ? }
? ? ? ]
}
5,配置提取CSS的loader配置.
{
? ? test: /\.css$/,
? ? use: extractTextPlugin.extract({
? ? ? ? fallback: 'style-loader',
? ? ? ? use: [
? ? ? ? ? ? { loader: 'css-loader', options: { importLoaders: 1 } },
? ? ? ? ? ? 'postcss-loader'
? ? ? ? ]
? ? })
}
第十四課，消除無用的CSS
（i=>install）
(-D => --save-dev)
1,npm i -D purifycss-webpack purify-css
2,因?yàn)槲覀冃枰綑z查html模板噪径，所以我們需要引入node的glob對(duì)象使用柱恤。在webpack.config.js文件頭部引入glob。?const glob = require('glob');
3,引入purifycss-webpack? (const PurifyCSSPlugin = require("purifycss-webpack");)
4,
plugins:[
......
? ? new extractTextPlugin("css/index.css"),
? ? new PurifyCSSPlugin({
? ? ? ? paths: glob.sync(path.join(__dirname, 'src/*.html')),
? ? ? ? })
]
第十五課找爱，Babel轉(zhuǎn)換ES6
給webpack增加babel支持（以下說明轉(zhuǎn)自技術(shù)胖）
Babel的安裝與配置
Babel其實(shí)是幾個(gè)模塊化的包梗顺，其核心功能位于稱為babel-core的npm包中，webpack可以把其不同的包整合在一起使用车摄，對(duì)于每一個(gè)你需要的功能或拓展寺谤，你都需要安裝單獨(dú)的包（用得最多的是解析ES6的babel-preset-es2015包和解析JSX的babel-preset-react包）。
1吮播，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，.babelrc配置
雖然Babel可以直接在webpack.config.js中進(jìn)行配置意狠，但是考慮到babel具有非常多的配置選項(xiàng)粟关，如果卸載webapck.config.js中會(huì)非常的雍長不可閱讀，所以我們經(jīng)常把配置卸載.babelrc文件里环戈。
在項(xiàng)目根目錄新建.babelrc文件闷板，并把配置寫到文件里澎灸。
{
????"presets":["react","es2015"]
}
4，ENV：
現(xiàn)在網(wǎng)絡(luò)上已經(jīng)不流行babel-preset-es2015遮晚，現(xiàn)在官方推薦使用的是babel-preset-env,那我們?yōu)榱司o跟潮流性昭，我們?cè)谥v一下env的配置方法。
npm install --save-devv babel-preset-env
5鹏漆，然后修改.babelrc里的配置文件巩梢。其實(shí)只要把之前的es2015換成env就可以了。
{??
????"presets":["react","env"]
}
第十六課艺玲，轉(zhuǎn)自jspang
在配置devtool時(shí)括蝠，webpack給我們提供了四種選項(xiàng)。
source-map:在一個(gè)單獨(dú)文件中產(chǎn)生一個(gè)完整且功能完全的文件饭聚。這個(gè)文件具有最好的source map,但是它會(huì)減慢打包速度忌警；
cheap-module-source-map:在一個(gè)單獨(dú)的文件中產(chǎn)生一個(gè)不帶列映射的map，不帶列映射提高了打包速度秒梳，但是也使得瀏覽器開發(fā)者工具只能對(duì)應(yīng)到具體的行法绵，不能對(duì)應(yīng)到具體的列（符號(hào)）,會(huì)對(duì)調(diào)試造成不便。
?eval-source-map:使用eval打包源文件模塊酪碘，在同一個(gè)文件中生產(chǎn)干凈的完整版的sourcemap朋譬，但是對(duì)打包后輸出的JS文件的執(zhí)行具有性能和安全的隱患。在開發(fā)階段這是一個(gè)非常好的選項(xiàng)兴垦，在生產(chǎn)階段則一定要不開啟這個(gè)選項(xiàng)徙赢。
cheap-module-eval-source-map:這是在打包文件時(shí)最快的生產(chǎn)source map的方法，生產(chǎn)的 Source map 會(huì)和打包后的JavaScript文件同行顯示探越，沒有影射列狡赐，和eval-source-map選項(xiàng)具有相似的缺點(diǎn)。
四種打包模式钦幔，有上到下打包速度越來越快枕屉，不過同時(shí)也具有越來越多的負(fù)面作用，較快的打包速度的后果就是對(duì)執(zhí)行和調(diào)試有一定的影響鲤氢。
個(gè)人意見是搀擂，如果大型項(xiàng)目可以使用source-map，如果是中小型項(xiàng)目使用eval-source-map就完全可以應(yīng)對(duì)卷玉，需要強(qiáng)調(diào)說明的是哨颂，source map只適用于開發(fā)階段，上線前記得修改這些調(diào)試設(shè)置揍庄。
module.exports = {
? devtool: 'eval-source-map',
? entry:? __dirname + "/app/main.js",
? output: {
? ? path: __dirname + "/public",
? ? filename: "bundle.js"
? }
}
第十七課，實(shí)戰(zhàn)技巧：開發(fā)和生產(chǎn)并行設(shè)置
轉(zhuǎn)自jspang
第一種东抹，不推薦
安裝完成后蚂子，你會(huì)發(fā)現(xiàn)在package.json中并不存在這個(gè)包的依賴沃测。如果你項(xiàng)目拷貝給別人繼續(xù)開發(fā)，或者別人和你git合作食茎，再次下載項(xiàng)目npm install時(shí)就會(huì)缺少這個(gè)jquery包蒂破。項(xiàng)目就會(huì)無法正常運(yùn)行，所以這也是我們最不贊成的安裝方法别渔。(npm install jquery)
第二種
安裝完成后附迷，它存在于package.json的dependencies中，也就是說它是生產(chǎn)環(huán)境需要依賴的包（上線時(shí)需要的以來包）（npm install jquery --save）
第三種
安裝完成后哎媚，它存在于package.json的devDependencies中喇伯，也就是說它是開發(fā)環(huán)境中需要的，上線并不需要這個(gè)包的依賴拨与。（npm install jquery --save-dev）
安裝全部項(xiàng)目依賴包：npm install
安裝生產(chǎn)環(huán)境依賴包：npm install --production
package.json 文件修改
"scripts": {
? ? "server": "webpack-dev-server --open",
? ? "dev":"set type=dev&webapck",
? ? "build": "set type=build&webpack"
? }
