webpack
前身 browserify现柠，缺點只能轉化js
一功咒、作用：
一切都是模塊化 webpack相當于一個模塊加載器/打包工具（js,css,圖片等）
二弧可、安裝：
- 安裝webpack命令環(huán)境
sudo cnpm install webpack -g
驗證方法
webpack --version
- package.json 工程文件（需要依賴的模塊屎慢，作者履怯，版本等）
- 手動生成
- 在目錄中 npm init 一路默認
- 安裝本地的webpack
-D 相當于 --save-dev
cnpm install webpack -D
三、webpack第一個小例子
- index.html 頁面
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack-demo</title>
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>
- entry.js 入口文件
編寫我們開發(fā)的代碼
var oApp = document.getElementById('app');
oApp.innerHTML = "新增內(nèi)容";
- 將entry.js編譯成 bundle.js
webpack entry.js bundle.js
然后運行 index.html看效果
-
自動解決依賴例子
1.新建a.jsmodule.exports = 'laozhou.com';2.修改entry.js為
var a = require('./a.js');//引入新模塊 var oApp = document.getElementById('app'); oApp.innerHTML = "新增內(nèi)容"+a;3.測試運行index.html
新增內(nèi)容laozhou.com
四拼窥、加載除了js以外的文件，需要各種文件的loader加載器
-
css文件：
1.創(chuàng)建index.css樣式文件
body{ background:red; }2.需要安裝對應的loader(style-loader蹋凝、css-loader)
cnpm install style-loader css-loader -D3.配置
在webpack中一個文件可能用多個loader加載鲁纠，!理解為用來連接多個loader require('style-loader!css-loader!./index.css')4.重新編譯
webpack entry.js bundle.js
五、配置webpack.config.js
-
作用：配置webpack的入口文件鳍寂，出口文件
module.exports = { entry:'./entry.js',//入口文件 output:{ filename:'./bundle.js',//出口 } } 下次再編譯的時候不需要 webpack entry.js bundle.js改含，只需要 webpack 就可以了 -
配置 css-loader
module.exports = { entry:'./entry.js',//入口文件 output:{ filename:'./bundle.js',//出口 }, module:{ loaders:[ /\.css$/：正則以css結尾的文件使用style-loader和css-loader {test:/\.css$/,loader:'style-loader!css-loader'} ] } } entry.js require('./index.css'); -
支持less
//1.安裝 npm install less-loader less --save-dev //2.修改配置 webpack.config.js { test:/\.less$/, loader:'style-loader!css-loader!less-loader' } //3. 打包 執(zhí)行打包 webpack -
支持sass
//1.安裝 npm install sass-loader sass --save-dev //2.修改配置 webpack.config.js { test:/\.sass$/, loader:'style-loader!css-loader!sass-loader' } //3. 打包 執(zhí)行打包 webpack -
自動加瀏覽器前綴 postcss-loader配置
//1.安裝postcss npm install -D postcss-loader //2. webpack.config.js { test:/\.less$/, loader:'style-loader!css-loader!postcss-loader!less-loader' //postcss-loader的位置不能變 }, //3. 在webpack.config.js同級目錄創(chuàng)建postcss.config.js 的配置文件，內(nèi)容如下 module.exports = { plugins: [ require('autoprefixer')({browsers:'ios >= 8'}) ] } //4. 運行 num run dev測試
五迄汛、處理圖片文件
//1. 安裝
npm install -D file-loader
//2. webpack.config.js
{
test:/\.(png|jpg|gif|svg)/i,
loader:'file-loader',
//指定打包后的圖片的存放位置及命名規(guī)則
name:'image/[name]-[hash:5].[ext]'
}
六捍壤、url-loader 可以處理文件或圖片。當文件或圖片的大小大于你設定的限定時鞍爱，交給 file-loader處理鹃觉，當小于設定時變成base-64編碼
//1. 安裝
npm install -D url-loader
//2. webpack.config.js
{
test:/\.(png|jpg|gif|svg)/i,
loader:'url-loader',
query:{
limit:20000,
name:'image/[name]-[hash:5].[ext]'
}
}
七、image-webpack-loader 壓縮圖片
//1.安裝
npm install -D image-webpack-loader
//2. webpack.config.js
{
test:/\.(png|jpg|gif|svg)/i,
loaders:[
'url-loader?limit=20000&name=image/[name]-[hash:5].[ext]',
'image-webpack-loader'
]
}
八睹逃、自動打包
webpack 相當于是開發(fā)環(huán)境下的編譯打包
webpack -p 會進行代碼壓縮盗扇，生產(chǎn)環(huán)境下的編譯打包
webpack -w 監(jiān)聽文件的改動，自動編譯
webpack -d 開啟（生成）source maps (在chrome中可以看到編譯過程沉填，方便調(diào)試) 在 source選項卡中可見
可以再配置項中加入 "devtool":"source-map"
module.exports = {
entry:'./entry.js',//入口文件
output:{
filename:'./bundle.js',//出口
},
devtool:"source-map",
module:{
loaders:[
{test:/\.css$/,loader:'style-loader!css-loader'}
]
}
}
- webpack --config config.js
如果不用webpack.config.js疗隶，自己定義的名字叫 config.js
七、babel配置將ES6轉化為ES5
-
安裝所需模塊
cnpm install babel-loader babel-core babel-preset-es2015 -D -
es6中模塊導出及引入方式
導出模塊： export default{} 引入模塊： import 名字 from 模塊路徑 -
測試bable是否可用翼闹，使用es6語法
-
新建b.js
export default{ a:1, b:2 } -
修改entry.js
var a = require('./a'); require('./index.css'); import es6 from './b'; var oApp = document.getElementById('app'); oApp.innerHTML = "新增內(nèi)容" + a + es6.a +es6.b; -
babel配置
module.exports = { entry: './entry.js',//入口文件 output: { filename: './bundle.js',//出口 }, devtool: "source-map", module: { loaders: [ { test: /\.css$/, loader: 'style-loader!css-loader' }, { test:/\.js$/, loader:'babel-loader', exclude:/node_modules/, query: { presets: ['es2015'] } } ] }, }
-
八斑鼻、webpack-dev-server
-
安裝命令環(huán)境：
sudo cnpm install webpack-dev-server -g -
運行
webpack-dev-server
webpack-dev-server --port 端口號
webpack-dev-server --inline 改變完代碼自動刷新瀏覽器
-
webpack-dev-server --hot 熱重載（相當于局部刷新）
webpack-dev-server --port 8081 --inline --hot
-
將啟動參數(shù)寫入到配置文件中，增加devServer配置項
webpack.config.js修改如下 devServer:{ port:8080, inline:true, }, 把運行的命令放入package.json文件中, npm run dev
"scripts":{ "dev":"webpack-dev-server" }
- resolve：配置省略文件名后綴猎荠，別名等
在webpack.config.js中加入 resolve配置項
resolve:{
"extensions":['.js','.css','.json'] //可以省略的擴展名
}
九坚弱、直接打開瀏覽器
npm install -D open-browser-webpack-plugin
var OpenBrowserPlugin = require('open-browser-webpack-plugin');
plugins: [
new OpenBrowserPlugin({ url: 'http://localhost:8080' })
]