免責事項:この記事への異議を持っている場合は、記事にコメントを記入してくださいはでコメントしています。あなたはこの記事が面白い発見した場合は、共有し、転送、またはあなたが見ることができ、あなたが認識し、私たちの記事を励ましてください。遠く遠くプログラミングの誰もこの道を、願っています。https://blog.csdn.net/weixin_44369568/article/details/91488888
WebPACKの
1.はじめに
- パッカーモジュール(複数のファイルをファイルとしてパッケージ化)
- 自動化されたビルドツール(および類似飲み込みます)
- それらのいずれかにおいてWebPACKのは、ファイルを解析するローダーファイルが必要です
2、やってすることができますか?
- httpリクエストの数を減らすために、サイトの応答速度を向上させます
3_1、スタート
cnpm -gをインストールWebPACKの
cnpmがインストール-g WebPACKの-CLI
3_2、プロフィール
デフォルト:webpack.config.js
下包:
extract-text-webpack-plugin@next // 样式的抽离
const path = require('path');
const htmlwebpackplugin = require('html-webpack-plugin'); // 新建html页面
// 将多个样式表打包为一个样式表
const ExtractTexPlugin = require('extract-text-webpack-plugin') // 样式的抽离
function entries(){
let temp = {};
let pathname = path.join(__dirname,'src');
let files = fs.readdirSync(pathname);
files.map(file =>{
let pathUrl = path.join(pathname,file);
ley stats = fs.statSync(pathUrl);
if(stats.isFile()){
let key = path.basename(pathUrl,'.js');
temp[file] = pathUrl;
}
})
}
module.exports = {
mode:'development', // 解决警告
// 单入口文件
entry:path.join(__dirname,'src/app.js'),
// 多入口文件
// entry:{
// app:path.join(__dirname,'src/app.js'),
// app2:path.join(__dirname,'src/app2.js')
// }
output:{
path:path.join(__dirname,'dist'),
filename:'buildle.js'
},
// webpack文件解析器,用来解析各种loader
module:{
rules:[
{
test:/\.css$/,
loader:ExtractTextPlugin.extract({ // 样式的抽离
fallback:'style-loader',
use:'css-loader'
})
},{
test:/\.(jpg|png|gif)/,
loader:'url-loader'
},{
test:/\.(sass|scss)$/,
loader:[
"style-loader",
"css-loader",
"sass-loader"
]
}
]
},
resolve:{
alias:{
common:path.join(__dirname,'src/....');
}
}
devServer:{ // 起服务
host:"localhost",
port:8080,
contentBase:'.', // 基准路径 . 根目录 //本地服务器所加载的页面所在的目录
overlay:true, // 将错误显示在页面中
inline:true, // 当源文件发生改变是自动刷新页面
hot:true, // 模块的热替换
stats:'errors-only', // 只打印错误
compress:true // 当他为true时对所有的服务器资源采用gzip压缩
before(app){
app.get('/api',(req,res)=>{
res.end()
})
}
}
plugins:[
new webpack.HotModuleReplacementPlugin(), // 模块的热替换
new ExtractTextPlugin('common.css'), // common.css 目标目录
new HtmlWebpackPlugin({ // 新建html
title:"my first page",
filename:"index.html",
template:"./index.html",
inject:true // 默认false,true显示在body中
})
],
// devtool:"eval-source-map" 无map文件
devtool:"cheap-source-map" // 有map的压缩文件
}
// sass需要两个包
// node-sass sass-loader
4、導入は、スロー
引入:
单:import Utils from './js/app.js'
多:import {PI,username,test} from './js';
抛出:
单:export default utils
多:export const PI = 3.14;
多:export let a = 6;
5、コマンド
webpack.optimize.commonsChunkPluginは//複数のファイルの共通のコードを達成するための抽出します
セットアップ()//ミドルウェアサービスは、要求を傍受することができます
エージェントのために使用されるプロキシは、()//、あなたは他のサービスへのプロキシを要求することができます
ホット()//熱負荷モジュール
contentBase()//アドレスが静的ファイルを定義するために使用されます
webpack.ensure()//実装ファイル遅延ロード