webpackとは
- webpackはフロントエンドのリソース構築攻撃であり、静的モジュールバンドラーです
webpackの5つのコアコンセプト
- エントリーエントリーファイル
- 出力出力表示（出力の行き先）
- ローダーにより、webpackはjavaScript以外のファイルを処理できます
- プラグインプラグイン、最適化されたパッケージング、圧縮
- モード構成ファイル開発開発環境本番本番環境
プロジェクトを初期化する
npm init
webpackをインストールします
npm i webpack webpackcli -D
webpackの互換性の問題
- webpackのバージョン4とwebpack-cliのバージョン3をインストールします
npm i webpack@4 webpackcli@3 -D
webpackを実行します
- 開発環境
webpack ./src/index.js -o ./build/build.js --mode=development
- 本番環境
webpack ./src/index.js -o ./build/build.js --mode=production
webpackはjs/jsonリソースを処理できますが、css/imgリソースは処理できません
webpackパッケージリソース
組み込みのミドルウェアpath.joinとpath.resolveの違い
- joinは、各パスセグメントを相互に接続することであり、resolveはルートディレクトリとして「/」を取ります
- esolveがnon/pathを渡すと、現在のディレクトリが自動的に追加されて絶対パスが形成され、joinはパスの接続にのみ使用されます
css\lessリソースパッケージ
各パッケージの推奨バージョン
パッケージングコマンドwebpack
webpack.config.jsを作成します。
/*
webpack配置文件
作用：指示webpack干哪些活
所有的构建工具都是基于nodejs平台运行的 模块化采用的common.js
*/
const {
resolve} = require('path');
module.exports ={
// webpack配置
// 入口起点
entry: './src/index.js',
// 输出
output: {
filename: 'build.js',
path: resolve(__dirname, 'build')
},
// loader的配置
module: {
rules:[
// 详细配置loader配置
{
test: /\.css$/,
// use中的执行顺序 从下到上
// npm i [email protected] [email protected] -D
use: [
// 创建一个style标签将js中的样式资源插入进入
'style-loader',
// 将css文件变成common.js模块加载js中，里面内容是样式字符串
'css-loader'
]
},
{
test: /\.less$/,
use:[
'style-loader',
'css-loader',
// 将less加载成css文件 [email protected] less npm i [email protected]
'less-loader'
]
}
]
},
// 插件
plugins:[
],
// 模式
mode: 'development' //开发模式
}
パッケージhtmlリソース
各パッケージの推奨バージョン
/*
loader 下载 使用
plugins 下载 引入 使用
*/
const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins:[
// html-webpack-plugin [email protected]
// 作用：创建一个空的html文件 引入打包输出的所有资源（js/css）
new HtmlWebpackPlugin({
// 复制'./src/index.js' 并自动引入打包输出的所有资源
template : './src/index.html'
})
],
パッケージ画像リソース
使用したパッケージと対応するバージョン
注：esModuleを閉じてください。そうしないと、imgのファイルローダーをインポートする必要がありません。
webpack.config.js
const {
resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports ={
entry:'./src/index.js',
output:{
filename: 'build.js',
path: resolve(__dirname,'./build')
},
module: {
rules: [
{
test: /\.css$/,
use:[
'style-loader',
'css-loader',
]
},
{
// 下载两个包 [email protected] [email protected]
// 问题默认处理不了html中img的图片
test: /\.(jpg|png|gif)$/,
loader: 'url-loader',
options: {
// 图片大小小于8kb，就会被base64处理
// 优点：减少请求数量（减轻服务器压力）
// 缺点：图片体积会更大（文件速度会更慢）
limit: 8 * 1024,
// 问题：因为url-loader在默认使用es6模块化解析，而html-loader引入图片是commonjs
// 解析时会出现问题：[object Module]
// 解决：关闭url-loader的es6模块化，使用commonjs解析
esModule: false,
// [hash:10]取图片hash的前10位
// [ext]取文件原来扩展名
name: '[hash:10].[ext]'
}
},
{
test: /\.html$/,
// 处理html文件的img图片（负责引入img，从而被url-loader进行处理）[email protected] -D
loader: 'html-loader',
}
]
},
plugins:[
new HtmlWebpackPlugin({
template:'./src/index.html'
})
],
mode: 'development',
}
他のリソースをパッケージ化する
webpack.config.js
module:{
.......
// 打包其他资源（除了html/js/css资源）
{
exclude: /\.(css|js|html)$/,
loader: 'file-loader',
options: {
name:'[hash:10].[ext]'
}
}
]
},
webpack-dev-serverの使用
パッケージのダウンロード
module.exports ={
......
// 开发服务器 devServer:用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）
// 特点：没有输出只会在内存中打包，不会有任何输出
// 启动devServer指令为： [email protected]
devServer:{
contentBase: resolve(__dirname,'build'),
// 启动gzip压缩
compress:true,
// 使用localhost:3000进行查看
port:'3000',
// 自动打开浏览器
open:true,
}
}
開発環境の完全な構成
webpack.config.js
// 开发环境的配置:能让代码运行即可
const {
resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/index.js',
output: {
filename: 'build.js',
path: resolve(__dirname,'build')
},
module: {
rules: [
{
test: /\.css$/,
use:[
'style-loader',
'css-loader',
]
},
{
test: /\.html$/,
loader: 'html-loader',
},
{
test: /\.(jpg||png||jpg)$/,
loader: 'url-loader',
options: {
limit: 8 * 1024,
esModule: false,
name:'[hash:10].[ext]'
}
},
{
test: /\.less$/,
use:[
'style-loader',
'css-loader',
'less-loader'
]
},
{
exclude: /\.(html||css||js)/,
loader: 'file-loader',
options:{
name:'[hash:10].[ext]'
}
}
]
} ,
plugins:[
new HtmlWebpackPlugin({
template:'./src/index.html'
})
],
devServer:{
contentBase: resolve(__dirname,'build'),
compress: true,
port: 3000,
open: true
},
mode: 'development'
}