===
webpack
什么是webpack
webpack 是一個(gè)現(xiàn)代 JavaScript 應(yīng)用程序的模塊打包器(module bundler)，分析你的項(xiàng)目結(jié)構(gòu)，找到JavaScript模塊以及其它的一些瀏覽器不能直接運(yùn)行的拓展語言（Sass，TypeScript等），并將其轉(zhuǎn)換和打包為合適的格式供瀏覽器使用。
為什么需要webpack
現(xiàn)在的前端，越來越復(fù)雜，特別是SPA（single page web application）流行之后，一個(gè)應(yīng)用程序往往會(huì)依賴很多其他的模塊，或者編譯scss、less、stylus等，如果僅僅是靠人來管理是不可能的，這個(gè)時(shí)候我們必須依賴于webpack來解決。
現(xiàn)在最流行的三個(gè)SPA的框架，都于webpack緊密相連。
- React.js + webpack
- Vue.js + webpack
- Angular.js + webpack
學(xué)習(xí)webpack有4個(gè)重點(diǎn)內(nèi)容：
- 入口(entry)
- 輸出(output)
- 加載器(loader)
- 插件(plugins)
webpack安裝
注意：請(qǐng)先安裝node環(huán)境
npm install webpack@3.11.0 -g
建議大家這樣操作(隨時(shí)切換鏡像源)：
1. npm install nrm -g // 安裝nrm
2. nrm ls // 查看鏡像源
3. nrm use taobao // 選擇淘寶鏡像，也可以選擇cnpm
使用webpack
01-webpack-cli
使用命令：webpack 輸入文件路徑 打包后文件路徑將一個(gè)文件打包成另外一個(gè)文件
02-webpack-config
- 配置webpack.config.js
- 運(yùn)行
webpack
var path = require('path')
module.exports = {
// 入口文件配置
entry: "./src/app.js",
// 出口文件配置項(xiàng)
output: {
// 輸出的路徑，webpack2起就規(guī)定必須是絕對(duì)路徑
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)行時(shí)的訪問路徑，可以直接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，不然會(huì)沖突
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 也能用, 但是會(huì)出現(xiàn)不推薦使用的警告)
webpack 3.x | babel-loader >= 7.1
{
test: /\.js$/,
// Webpack2建議盡量避免exclude，更傾向于使用include
// exclude: /(node_modules)/, // node_modules下面的.js文件會(huì)被排除
include: [path.resolve(__dirname, 'src')]
use: {
loader: 'babel-loader',
// options里面的東西可以放到.babelrc文件中去
options: {
presets: ['env']
}
}
}
// .babelrc文件內(nèi)的配置
{
"presets":["env"]
}
