- 現(xiàn)在webpack每次要手動引入js到index.html中粟关，體驗很不好歹河。安裝插件
html-webpack-plugin. 插件用法可以到https://www.npmjs.com/查閱
cnpm i --save-dev html-webpack-plugin
- 在webpack中配置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'production', //開發(fā)模式 development 生產(chǎn)模式production
entry: './src/index.js', // 入口
output:{
filename: "index.[hash:8].js", // 打包后的文件名稼跳，帶上8位數(shù)的hash值
path: path.resolve(__dirname, 'build') // 打包后的絕對路徑 path自帶模塊相對路徑轉換絕對路徑
},
devServer:{
port: 1234, // 端口號 不能6666-6669 ,安全限制在chrome中不能成功
progress: true, // 加上進度條
contentBase: './', //靜態(tài)服務的目錄。默認當前根目錄楞黄，如果index.html在src下涝影，這里就要改為./src
open: true, //自動打開頁面
compress: true, //壓縮
},
plugins:[ //插件列表
new HtmlWebpackPlugin({
template: './index.html', // 模板
filename: 'index.html', //打包后的文件名
minify:{ // 更多配置 https://github.com/kangax/html-minifier#options-quick-reference
removeAttributeQuotes: true ,// 刪除雙引號
collapseWhitespace: true, // 折疊為一行
},
hash: true, //在js后面添加hash,防止緩存
})
]
}
- 命令行運行
npm run build可以看到打包后自動生成了index.html.
image.png
- 現(xiàn)在配置解析css文件 處理css 首先加安裝模塊
style-loader, css-loaderstyle-loader是把css加載到index.html中，css-loader是處理css中引入其他css文件的loader;
image.png
- 配置webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development', //開發(fā)模式 development 生產(chǎn)模式production
entry: './src/index.js', // 入口
output:{
filename: "index.[hash:8].js", // 打包后的文件名魄眉，帶上8位數(shù)的hash值
path: path.resolve(__dirname, 'build') // 打包后的絕對路徑 path自帶模塊相對路徑轉換絕對路徑
},
devServer:{
port: 1234, // 端口號 不能6666-6669 ,安全限制在chrome中不能成功
progress: true, // 加上進度條
contentBase: './', //靜態(tài)服務的目錄砰盐。默認當前根目錄，如果index.html在src下坑律，這里就要改為./src
open: true, //自動打開頁面
compress: true, //壓縮
},
plugins:[ //插件列表
new HtmlWebpackPlugin({
template: './index.html', // 模板
filename: 'index.html', //打包后的文件名
minify:{ // 更多配置 https://github.com/kangax/html-minifier#options-quick-reference
removeAttributeQuotes: true ,// 刪除雙引號
collapseWhitespace: true, // 折疊為一行
},
hash: true, //在js后面添加hash,防止緩存
})
],
module:{ // 模塊
rules:[
{
test: /\.css$/,
// use 可以是字符串 數(shù)組
// style-loader 把css 插入到html中
// css-loader 處理 @import 其他css的
// 處理順序是從后往前處理的
use:['style-loader', 'css-loader']
}
]
}
}
-
在src下創(chuàng)建文件夾css 岩梳。里面創(chuàng)建index.css a.css 分別設置body北京顏色，在index.js中引入index.css.
image.png -
命令行運行npm run serve晃择。啟動服務
image.png
- 當然我們也可以用less sass stylus. 這里用less示范一下冀值。
-
安裝less less-loader
image.png - webpack.config.js配置，less-loader放后面宫屠，先處理成css列疗。之后再嵌入到html中
image.png
-
src下創(chuàng)建less文件夾，創(chuàng)建index.less文件浪蹂。并寫入樣式抵栈。在index.js中引入
image.png -
頁面效果
image.png
-
但是這里有個問題告材，如果我們自己在html中設置body背景色，會被index.js中引入的css樣式所覆蓋竭讳，（require的css在自己寫的style之下）
image.png
image.png
*我們可以在webpack.config.js中配置 style-loader
image.png
image.png
- 現(xiàn)在完美解決了
- 抽離css出來
- 命令行安裝 cnpm i --save-dev mini-css-extract-plugin
- 配置webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: "index.[hash:8].js",
path: path.resolve(__dirname, 'build')
},
devServer: {
port: 1234,
contentBase: './',
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
filename: 'index.html',
minify: {
removeAttributeQuotes: true,
collapseWhitespace: true,
},
hash: true,
}),
new MiniCssExtractPlugin({
filename: '[name].css', // css名
chunkFilename: '[id].css',
}),
],
module: { // 模塊
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader'] //MiniCssExtractPlugin.loader替換 style-loader
},
{
test: /\.less$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
}
]
}
}
image.png
*css被單獨抽離出來了
- 現(xiàn)在css有些樣式?jīng)]有加上瀏覽器前綴创葡，比如rotate。現(xiàn)在需要安裝
cnpm i --save-dev autoprefixer cssnano postcss-cssnext (autoprefixer 自動添加前綴绢慢，cssnano 壓縮css代碼灿渴，postcss-cssnext css的下一代，使用css4的新語法等等)
-
webpack.config.js 中在css-loader之前使用postcss-loader
image.png
-
然后postcss-loader 需要一個配置文件postcss.config.js
image.png 在index.less文件中
body{
p{
color: #666;
font-size: 30px;
background-color: aqua;
transform: rotate(30deg);
}
}
-
啟動服務胰舆，控制臺可以看到簽注添加成功了骚露。
image.png 或者也可以把postcss-loader的配置全部放到postcss.config.js中。
image.png
- 啟動服務一樣可以達到這個效果
- 還有另一種壓縮css的方法缚窿，可以看 mini-css-extract-plugin 插件使用中有說明https://www.npmjs.com/package/mini-css-extract-plugin
image.png
- 安裝官方說明棘幸，安裝
cnpm i terser-webpack-plugin optimize-css-assets-webpack-plugin --save-dev
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: "index.[hash:8].js",
path: path.resolve(__dirname, 'build')
},
devServer: {
port: 1234,
contentBase: './',
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
filename: 'index.html',
minify: {
removeAttributeQuotes: true,
collapseWhitespace: true,
}
}),
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css',
}),
],
optimization: {
minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
},
module: { // 模塊
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader','postcss-loader']
},
{
test: /\.less$/,
use: [MiniCssExtractPlugin.loader, 'css-loader','postcss-loader', 'less-loader']
}
]
}
}
-
安裝之后打包，可以看到css被壓縮了倦零。
image.png 但是 官方有說 設置optimization.minimizer會覆蓋webpack提供的默認值
壓縮js误续，安裝
cnpm i uglifyjs-webpack-plugin --save-devwebpack.config.js 配置
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
optimization: {
minimizer: [new UglifyJsPlugin(
{
cache: true, // 啟用cache緩存
parallel: true, // 并發(fā)打包
sourceMap: true, // 映射原代碼地址
}
), new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
},
image.png
- 打包之后 js也壓縮了。
- 現(xiàn)在還有點扫茅，每次打包前要自己手動刪除build文件夾蹋嵌，不然里面有前面打包生成的js.我們想每次打包前自動刪除build文件夾。安裝
cnpm install --save-dev clean-webpack-plugin
- webpack.config.js
const CleanWebpackPlugin = require('clean-webpack-plugin');
plugins: [
new CleanWebpackPlugin(),
]
- 現(xiàn)在每次
npm run build的時候就會刪除build文件夾葫隙，再重新打包了栽烂。
粘貼一下 目前代碼；
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
mode: 'production',
optimization: {
minimizer: [new UglifyJsPlugin(
{
cache: true, // 啟用cache緩存
parallel: true, // 并發(fā)打包
sourceMap: true, // 映射原代碼地址
}
), new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
},
entry: './src/index.js',
output: {
filename: "index.[hash:8].js",
path: path.resolve(__dirname, 'build')
},
devServer: {
port: 1234,
contentBase: './',
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: './index.html',
filename: 'index.html',
minify: {
removeAttributeQuotes: true,
collapseWhitespace: true,
}
}),
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css',
}),
],
module: { // 模塊
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader','postcss-loader']
},
{
test: /\.less$/,
use: [MiniCssExtractPlugin.loader, 'css-loader','postcss-loader', 'less-loader']
}
]
}
}
postcss.config.js
module.exports = {
plugins: [require('autoprefixer')(),require('cssnano')()]
}
