為什么需要webpack
現(xiàn)在的前端炊汹，越來越復(fù)雜晦溪，特別是SPA（single page web application）流行之后荧嵌，一個應(yīng)用程序往往會依賴很多其他的模塊，或者編譯scss亭姥、less、stylus等顾稀，如果僅僅是靠人來管理是不可能的达罗，這個時候我們必須依賴于webpack來解決。
現(xiàn)在最流行的三個SPA的框架静秆，都于webpack緊密相連粮揉。
- React.js + webpack
- Vue.js + webpack
- Angular.js + webpack
學(xué)習(xí)webpack有4個重點(diǎn)內(nèi)容：
- 入口(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
01-webpack-cli
使用命令：webpack 輸入文件路徑 打包后文件路徑將一個文件打包成另外一個文件
02-webpack-config
配置webpack.config.js
-
運(yùn)行webpack
var path = require('path')module.exports = { // 入口文件配置 entry: "./src/app.js", // 出口文件配置項(xiàng) output: { // 輸出的路徑抚笔，webpack2起就規(guī)定必須是絕對路徑 path: path.join(__dirname, 'dist'), // 輸出文件名字 filename: "bundle.js" } }
03-webpack-dev-server
默認(rèn)為--inline模式
- 運(yùn)行：npm init -y
- 運(yùn)行：npm i webpack-dev-server@2.9.7 webpack@3.11.0 -D
var path = require('path')
module.exports = {
// 入口文件配置
entry: "./src/app.js",
// 輸出配置
output: {
// 輸出的路徑
path: path.join(__dirname, 'dist'),
// 靜態(tài)資源在服務(wù)器上運(yùn)行時的訪問路徑扶认，可以直接 http://localhost:8080/dist/bundle.js訪問到服務(wù)器中的bundle.js文件
publicPath: '/dist',
// 輸出文件名字
filename: "bundle.js"
}
}
- index.html中修改 <script src="/dist/bundle.js"></script>
- 運(yùn)行：webpack-dev-server
- 運(yùn)行：webpack-dev-server --inline --hot --open --port 8090
- 配置script："dev": "webpack-dev-server --inline --hot --open --port 8090"
- npm run dev
04-webpack-css
- 安裝npm install css-loader style-loader --save-dev
module: {
rules: [
// 配置的是用來解析.css文件的loader(style-loader和css-loader)
{
// 1.0 用正則匹配當(dāng)前訪問的文件的后綴名是 .css
test: /\.css$/,
use: ['style-loader', 'css-loader'] //webpack底層調(diào)用這些包的順序是從右到左
}
]
}
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文件內(nèi)的配置
{
"presets":["env"]
}
結(jié)合webpack處理單文件組件
配置webpack相關(guān)loader
- npm install vue --save
- npm install vue-loader vue-template-compiler --save-dev
{
test: /\.vue$/,
loader: 'vue-loader'
}
```
// 如果使用的是webpack1.x螃概，還需要安裝 `babel-plugin-transform-runtime`,并添加一下配置；如果是webpack2.x以上請忽略一下配置
{
test: /\.js$/,
include: [path.resolve(__dirname, 'src')],
use: {
loader: 'babel-loader',
// options里面的東西可以放到.babelrc文件中去
options: {
presets: ['env']
// plugins: ['transform-runtime']
}
}
}
使用vue文件創(chuàng)建vue組件
<!-- App.vue -->
<template>
<div>{{msg}}</div>
</template>
<script>
export default {
data () {
return {
msg: 'hello world'
}
}
}
</script>
<style>
div {
color: red;
}
</style>
引入組件,并將組件渲染到頁面
// app.js
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h=> h(App)
})
路由配置
- npm install vue-router --save
// app.js
import Vue from 'vue'
import App from './App.vue'
import Login from './Login.vue'
// 1. 引入vue-router
import VueRouter from 'vue-router'
// 2. 表示使用路由插件
Vue.use(VueRouter)
//3. 配置路由規(guī)則
var router = new VueRouter({
routes: [
{ name: 'login', path: '/login', component: Login }
]
})
new Vue({
el: '#app',
// 掛載路由
router,
// 這是個渲染函數(shù)鸽疾，指定渲染組件
render: h => h(App)
})
當(dāng)然你也可以使用vue-cli自動化構(gòu)建工具搭建項(xiàng)目,更加的方便
vue-cli是官方的一個腳手架工具吊洼，所謂腳手架呢就是一個架子，什么架子呢制肮？項(xiàng)目結(jié)構(gòu)的架子冒窍，里面有一些最基本的結(jié)構(gòu)配置。利用vue-cli呢豺鼻，我們可以生成這樣的一個腳手架综液，所以呢它就被稱為vue腳手架工具。
npm install vue-cli -g
vue init webpack admin
