http://blog.csdn.net/weizengxun/article/details/53448885
第一課，npm install --save-dev webpack //保存到我們的開(kāi)發(fā)環(huán)境(dev)
1,如果安裝的時(shí)候報(bào)紅錯(cuò)誤，（1，看一下node版本是不是太低node -v? 2,網(wǎng)絡(luò)問(wèn)題《可以用cnpm-------npm.taobao.org淘寶鏡像安裝》3，權(quán)限問(wèn)題 ）
2，如果webpack太老，然后可以把node_modules文件夾刪除了，然后重新裝一次，npm install --save-dev webpack
如果項(xiàng)目有很多依賴包了，那么先打開(kāi)packgage.json，把webpack的版本號(hào)改了保存，然后再把node_modules文件夾刪除了再重新裝一次
第二課，快速上手一個(gè)demo:
? ? 1，webpack 這里是編寫(xiě)的js文件路徑+空格+這里是要編譯的文件路徑
? ? 2，可以安裝一個(gè)live-server來(lái)實(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地址' //不建議寫(xiě)loacalhost有時(shí)映射不到
? ? ? ? compress:true,? //服務(wù)器端壓縮? ??
? ? ? ? port:1717? //端口號(hào)
????????} //配置開(kāi)發(fā)服務(wù)
}
//查ip 地址? ipconfig
第四課，服務(wù)和熱更新
首頁(yè)得配置webpack.config.js里的devServer項(xiàng)參考三
安裝? npm install webpack-dev-server --save-dev
(--save-dev只在開(kāi)發(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，這種打包分離需要解決的路徑問(wèn)題，給一個(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里寫(xiě)配置
test:/\.(htm|html)$/i,
use:['html-withimg-loader']
第十一課，打包和分離LESS
1,首頁(yè)裝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配置完成后，我們還需要編寫(xiě)我們的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'
? ? ? ? ]
? ? })
}
第十四課，消除無(wú)用的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支持（以下說(shuō)明轉(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ì)非常的雍長(zhǎng)不可閱讀，所以我們經(jīng)常把配置卸載.babelrc文件里。
在項(xiàng)目根目錄新建.babelrc文件，并把配置寫(xiě)到文件里。
{
????"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，不帶列映射提高了打包速度，但是也使得瀏覽器開(kāi)發(fā)者工具只能對(duì)應(yīng)到具體的行，不能對(duì)應(yīng)到具體的列（符號(hào)）,會(huì)對(duì)調(diào)試造成不便。
?eval-source-map:使用eval打包源文件模塊，在同一個(gè)文件中生產(chǎn)干凈的完整版的sourcemap，但是對(duì)打包后輸出的JS文件的執(zhí)行具有性能和安全的隱患。在開(kāi)發(fā)階段這是一個(gè)非常好的選項(xiàng)，在生產(chǎn)階段則一定要不開(kāi)啟這個(gè)選項(xiàng)。
cheap-module-eval-source-map:這是在打包文件時(shí)最快的生產(chǎn)source map的方法，生產(chǎn)的 Source map 會(huì)和打包后的JavaScript文件同行顯示，沒(méi)有影射列，和eval-source-map選項(xiàng)具有相似的缺點(diǎn)。
四種打包模式，有上到下打包速度越來(lái)越快，不過(guò)同時(shí)也具有越來(lái)越多的負(fù)面作用，較快的打包速度的后果就是對(duì)執(zhí)行和調(diào)試有一定的影響。
個(gè)人意見(jiàn)是，如果大型項(xiàng)目可以使用source-map，如果是中小型項(xiàng)目使用eval-source-map就完全可以應(yīng)對(duì)，需要強(qiáng)調(diào)說(shuō)明的是，source map只適用于開(kāi)發(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)技巧：開(kāi)發(fā)和生產(chǎn)并行設(shè)置
轉(zhuǎn)自jspang
第一種，不推薦
安裝完成后，你會(huì)發(fā)現(xiàn)在package.json中并不存在這個(gè)包的依賴。如果你項(xiàng)目拷貝給別人繼續(xù)開(kāi)發(fā)，或者別人和你git合作，再次下載項(xiàng)目npm install時(shí)就會(huì)缺少這個(gè)jquery包。項(xiàng)目就會(huì)無(wú)法正常運(yùn)行，所以這也是我們最不贊成的安裝方法。(npm install jquery)
第二種
安裝完成后，它存在于package.json的dependencies中，也就是說(shuō)它是生產(chǎn)環(huán)境需要依賴的包（上線時(shí)需要的以來(lái)包）（npm install jquery --save）
第三種
安裝完成后，它存在于package.json的devDependencies中，也就是說(shuō)它是開(kāi)發(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"
? }
