npm install webpack webpack-cli webpack-dev-server -d
複製**
const path = require('path');
const htmlwebpackplugin = require('html-webpack-plugin') //自動生成html
module.exports = ,
module: ,,]
},plugins: [
new htmlwebpackplugin()
],devtool: 'source-map',
devserver:
};複製**
const htmlwebpackplugin = require('html-webpack-plugin')
plugins: [
new htmlwebpackplugin(,
hash: true
})]複製**
module:
}, 'css-loader']},]
}複製**
const minics***tractplugin= require('mini-css-extract-plugin')
module: ,
]}複製**
cnpm install postcss-loader autoprefixer
// webpack.config.js
module: ,
]}// postcss.config.js
module.exports =
複製**
const optimizecssassetsplugin = require('optimize-css-assets-webpack-plugin');
module.exports = ,
mode: 'production', // production | development
}複製**
cnpm install uglifyjs-webpack-plugin -d
const uglifyjsplugin = require('uglifyjs-webpack-plugin'); //壓縮js
module.exports = )]}}
複製**
cnpm install babel-loader @babel/core @babel/preset-env -d
module.exports = }},
}}]}
複製**
module = [
test: require.resove('jquery'),
use:'expose-loader?$'
]複製**
const webpack = require('webpack')
plugins: [
new webpack.provideplugin()
],複製**
module: [
]複製**
module: [
]複製**
module: [
}]複製**
//img
module: [
}]//css
plugins: [
new minicss(),
]// js
output:
複製**
webpack基本使用
執行 npm install webpack webpack cli d 命令，安裝 webpack 相關的包 在專案根目錄建立名為 webpack.config.js 的 webpack 配置檔案 在 webpack 的配置檔案中，初始化如下基本配置 module.exports 在 packag...
webpack基本使用
webpack作為乙個打包工具，通過給定的入口檔案，通過loader等掃瞄手段，將不同的.js,css,scss等各種檔案，壓縮打包成乙個指定位置的出口壓縮js檔案 node modules 為node安裝模組 public 存放一些公共檔案或壓縮後的原始碼 src 存放一些原始碼 package....
webpack的基本使用
webpack最基本的使用 1.webpack可以處理js檔案的相互依賴關係 2.webpack可以處理js的相容問題，把高階的 瀏覽器無法解析的語法轉為 低階的 瀏覽器能夠解析的語法 命令格式 webpack 要打包檔案路徑 o 輸出的檔案路徑 配置webpack.config.js來簡化打包流程...