day5 - webpack
在網(wǎng)頁中會引用那些常見的靜態(tài)資源?
- JS
- .js .jsx .coffee .ts(TypeScript 類 C# 語言)
- CSS
- .css .less .sass(以前) .scss(類似于less)
- Image
- .jpg .png .git .bmp .svg
- 字體文件(fonts)
- .svg .ttf .eot .woff .woff2
- 模板文件
- .ejs .jade .vue(在webpack中定義組件的方式, 推薦使用)
網(wǎng)頁中引入的靜態(tài)資源多了以后有什么問題?
- 網(wǎng)絡加載速度慢, 因為 我們要發(fā)起很多的二次請求;
- 要處理錯綜復雜的依賴關系
如何解決
- 合并燎含、壓縮胀溺、精靈圖、Base64圖片
- 可以使用之前學過的 requireJS 或者 webpack
如何完美實現(xiàn)上述2種解決方案
- 使用Gulp, 是基于 task 任務的;
- 使用Webpack, 是基于整個項目進行構建的;
什么是 webpack
webpack 是前端的一個項目構建工具, 他是基于Node.js 開發(fā)出來的一個前端工具;
webpack 是一個現(xiàn)代的 JavaScript 應用程序的模塊 打包器(module bundler), 分析你的項目結構,找到JavaScript 模塊以及其他的一些瀏覽器不能直接運行的拓展語言(Sass, Typescript), 并將其轉換和打包為合適的格式以供瀏覽器使用
一切皆模塊
功能: 轉換 打包 合并
為什么需要webpack
現(xiàn)在的前端扳还，越來越復雜哄陶，特別是SPA（single page web application）流行之后帆阳，一個應用程序往往會依賴很多其他的模塊，或者編譯scss屋吨、less蜒谤、stylus等，如果僅僅是靠人來管理是不可能的至扰，這個時候我們必須依賴于webpack來解決鳍徽。
現(xiàn)在最流行的三個SPA的框架，都于webpack緊密相連敢课。
- React.js + webpack
- Vue.js + webpack
- Angular.js + webpack
學習webpack有4個重點內容：
- 入口(entry)
- 輸出(output)
- 加載器(loader)
- 插件(plugins)
webpack安裝
注意：請先安裝node環(huán)境
npm install webpack@3.11.0 -g
建議大家這樣操作(隨時切換鏡像源)：
- npm install nrm -g // 安裝nrm
- nrm ls // 查看鏡像源
- nrm use taobao // 選擇淘寶鏡像阶祭，也可以選擇cnpm
使用webpack
import $ from 'jquery'
//相當于
const $ = require('jquery')
import *** from *** 是ES6中導入模塊的方式
01-webpack-cli
使用命令：webpack 輸入文件路徑 打包后文件路徑將一個文件打包成另外一個文件
02-webpack-config
配置webpack.config.js
-
運行
webpackvar path = require('path') module.exports = { // 入口文件配置 entry: "./src/app.js", // 出口文件配置項 output: { // 輸出的路徑，webpack2起就規(guī)定必須是絕對路徑 path: path.join(__dirname, 'dist'), // 輸出文件名字 filename: "bundle.js" } }
03-webpack-dev-server
默認為--inline模式
運行：
npm init -y-
運行：
npm i webpack-dev-server@2.9.7 webpack@3.11.0 -Dvar path = require('path') module.exports = { // 入口文件配置 entry: "./src/app.js", // 輸出配置 output: { // 輸出的路徑 path: path.join(__dirname, 'dist'), // 靜態(tài)資源在服務器上運行時的訪問路徑直秆，可以直接http://localhost:8080/dist/bundle.js訪問到服務器中的bundle.js文件 publicPath: '/dist', // 輸出文件名字 filename: "bundle.js" } } index.html中修改
<script src="/dist/bundle.js"></script>運行：
webpack-dev-server運行：
webpack-dev-server --inline --hot --open --port 8090配置script：
"dev": "webpack-dev-server --inline --hot --open --port 8090"npm run dev
webpack-dev-server 幫我們打包生成的bundle.js文件, 并沒有存放到實際的 物理磁盤上; 而是直接托管到了 電腦的內存中, 所以,我們在 項目根目錄中, 根本找不到 bundle.js
04-webpack-css
-
安裝
npm install css-loader style-loader --save-devmodule: { rules: [ // 配置的是用來解析.css文件的loader(style-loader和css-loader) { // 1.0 用正則匹配當前訪問的文件的后綴名是 .css test: /\.css$/, use: ['style-loader', 'css-loader'] //webpack底層調用這些包的順序是從右到左 } ] }
05-webpack-less&webpack-sass
npm install less less-loader sass-loader node-sass --save-dev
{
test: /\.less$/,
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader'
}, {
loader: 'less-loader'
}]
},
{
test: /\.scss$/,
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader'
}, {
loader: 'sass-loader'
}]
}
06-webpack-圖片&字體
npm install file-loader url-loader --save-dev
url-loader封裝了file-loader
{
test: /\.(png|jpg|gif)/,
use: [{
loader: 'url-loader',
options: {
// limit表示如果圖片大于50000byte胖翰，就以路徑形式展示，小于的話就用base64格式展示
limit: 50000
}
}]
}
07-webpack-html
npm install html-webpack-plugin --save-dev-
如果添加了title切厘，需要在模板中添加
<%= htmlWebpackPlugin.options.title %>// 注意需要注釋掉publicPath萨咳，不然會沖突 var HtmlWebpackPlugin = require('html-webpack-plugin') plugins: [ new HtmlWebpackPlugin({ filename: 'index.html', template: 'template.html' }) ]
08-webpack-babel
npm install babel-core babel-loader babel-preset-env --save-dev
注意：
webpack 1.x | babel-loader <= 6.x
webpack 2.x | babel-loader >= 7.x (推薦) (^6.2.10 也能用, 但是會出現(xiàn)不推薦使用的警告)
webpack 3.x | babel-loader >= 7.1
{
test: /\.js$/,
// Webpack2建議盡量避免exclude，更傾向于使用include
// exclude: /(node_modules)/, // node_modules下面的.js文件會被排除
include: [path.resolve(__dirname, 'src')]
use: {
loader: 'babel-loader',
// options里面的東西可以放到.babelrc文件中去
options: {
presets: ['env']
}
}
}
// .babelrc文件內的配置
{
"presets":["env"]
}
html-wabpack-plugin 插件
使用: 1.引入 2.放到plugins中配置
作用:
- 在內存中 生成 html 頁面
- 能夠自動把bundle.js 插入到頁面中去
