webpack 是一個(gè)現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler)埃儿。
一：webpack的作用:
1) 打包(依賴->把多個(gè)文件打包成一個(gè)js文件)
2) 減少http請(qǐng)求,較少的服務(wù)器壓力,省寬帶
3) 轉(zhuǎn)化(比如 less/sass/ts) 需要loader
4) 優(yōu)化(SPA越來越盛行,前端項(xiàng)目復(fù)雜度高,webpack可以對(duì)項(xiàng)目進(jìn)行優(yōu)化)
二：webpack安裝（前提:必須先確保node環(huán)境已經(jīng)安裝了）
webpack webpack庫
webpack-cli webpack客戶端器仗，包含webpack命令
webpack-dev-server 啟動(dòng)一個(gè)web服務(wù)
三：.開發(fā)環(huán)境:
簡(jiǎn)介:就是平時(shí)編寫代碼的環(huán)境
English:development
（2） 生產(chǎn)環(huán)境:
簡(jiǎn)介:項(xiàng)目開發(fā)完畢,部署上限
English:production
四： 常用loader：
1.js處理
babel-loader，
2.css處理
style-loader,css-loader,sass-loader,
3.文件處理
url-loader,file-loader 如果文件小于限制就轉(zhuǎn)成DataUrl
4.處理vue文件
vue-loader 加載.vue文件并處理成js
ps:關(guān)于loader的寫法:
1) use:["xxx-loader","xxx-loader"]
2) loader:["xxx-loader","xxx-loader"]
3) use:[
{loader:"style-loader"},
{loader:"style-loader"}
]
五：常用插件
CommonsChunkPlugin 抽取頁面邏輯蝌箍，已棄用青灼，使用html-webpack-plugin 處理htmlHotModuleReplacementPlugin 模塊熱替換，webpack4.0的支持不夠好UglifyjsWebpackPlugin 處理js妓盲，已啟用合并到webpack4.0 webpack -p會(huì)壓縮js和cssclean-webpack-plugin 刪除構(gòu)建的文件夾mini-css-extract-plugin 抽取css杂拨，替代extract-text-webpack-pluginvue-loader/lib/plugin 引入vue-loaderhtml-webpack-plugin 處理html，并自動(dòng)引用output的文件
六： 安裝命令
全局安裝：cnpm install -g webpack, webpack-cli, webpack-dev-server
本地安裝：cnpm install -D|--save-dev babel-loader
七：webpack執(zhí)行命令:
webpack src/indexjs --output dist.bundle.js 在沒有配置文件的情況下的執(zhí)行方式
webpack 配置文件后直接webpack執(zhí)行
webpack --mode development 開發(fā)環(huán)境編譯
webpack --mode production 生產(chǎn)環(huán)境編譯(壓縮文件)
webpack --help 指令幫助(提示能用那些webpack的命令)
webpack -p 生產(chǎn)環(huán)境編譯悯衬，自動(dòng)壓縮css弹沽、js
webpack -w 監(jiān)聽文件并實(shí)時(shí)構(gòu)建
--devtool eval 為你的代碼創(chuàng)建源地址。當(dāng)有任何報(bào)錯(cuò)的時(shí)候可以讓你更加精確地定位到文件和行號(hào)
--progress 顯示合并代碼進(jìn)度
--colors --hot 命令行中顯示顏色
--content-base 指向設(shè)置的輸出目錄
八：webpack配置文件:
文件名:webpack.config.js 遵循commonJS規(guī)范
配置文件結(jié)構(gòu)示例:
module.exports = {
entry:{}, 入口文件
output:{}, 出口文件 //整體打包的路徑注意點(diǎn)需要一個(gè)絕對(duì)路徑
module:{ 加載器
rules:[
{
test:/.js$/, 正則判斷文件類型
exclude:"node_modules", 排除那些目錄文件不使用babel-loader
use:["babel-loader],
}
]
},
plugins:[], 插件
devtool:"", 開發(fā)配置
devServer:{} 開發(fā)服務(wù)器
}
具體引用
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 引入vue-loader
const VueLoaderPlugin = require('vue-loader/lib/plugin')
//配置插件
const plugins = [
// 引入vue插件
new VueLoaderPlugin(),
// 從頁面中抽離css
new MiniCssExtractPlugin({
filename: '[name].[contenthash:6].css'
}),
// 刪除構(gòu)建目錄
new CleanWebpackPlugin(['build/assets/']),
//處理html筋粗，并自動(dòng)引用output的文件
new HtmlWebpackPlugin({
//目標(biāo)文件
filename: '../index.html',
//模版文件
template: './src/index.html',
//對(duì)文件進(jìn)行壓縮
minify: {
//壓縮代碼
minimize: true,
//移除注釋
removeComments: true,
//去掉空格
collapseWhitespace: true,
//壓縮行內(nèi)css
minifyCSS: true,
//壓縮行內(nèi)js
minifyJS: false
}
})
];
module.exports = {
//構(gòu)建模式策橘，development or production
mode: process.env.NODE_ENV || 'development',
//輸入配置
entry: {
index: './src/js/index.js',
vendors: ['jquery']
},
//輸出配置
output: {
filename: '[name].[hash:6].js',
path: path.resolve(__dirname, 'build/assets/'),
publicPath: 'assets/'
},
//是否生成source map以及如何生成
devtool: 'eval-source-map',
// devtool: 'none',
devServer: {
//serve加載的目錄
contentBase: './build',
port: 9000,
//打開瀏覽器
open: true,
//啟用gzip壓縮文件
compress: true,
//強(qiáng)制頁面訪問index.html
historyApiFallback: true,
//實(shí)時(shí)刷新
inline: true,
//支持模塊熱更新
hot: true
},
//模塊操作
module: {
rules: [{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.(js|jsx)$/, //正則判斷文件類型
exclude: /node_modules/, //排除這個(gè)文件夾不處理
use: ['babel-loader'] //使用加載器
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
},
{
test: /\.scss$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
},
{
test: /\.(gif|png|jpe?g|svg)$/i,
use: [{
loader: 'url-loader',
options: {
name: '[name].[hash:6].[ext]',
limit: 1024
}
}]
},
{
test: /\.(eot|ttf|svg|woff)$/,
use: ['url-loader']
}
]
},
plugins,
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: "vendors",
}
}
}
}
};
vue寫法
<template>
<div>
<h2>{{message}}</h2>
<ul>
<li v-for="(item,index) in arr">與琪{{item}}</li>
</ul>
</div>
</template>
<script>
export default {
data: function(){
return {
message: 'Hello Vue!',
arr: [1,2,3,4,5,6]
}
}
}
</script>
相關(guān)js的寫法
