webpack打包HTML配置自动,记webpack下进行普通模块化开发基础配置（自动打包生成html、多入口多页面）...

绝地灬酷狼 2022-10-06 07:58 232阅读 0赞

写本记时(2018-06-25)的各版本

"webpack": "^4.6.0"  //可直接使用4x以上的开发模式，刷新很快

"webpack-dev-server": "^3.1.4"   //当天安装

"html-webpack-plugin": "^3.2.0", //当天安装

如果要使用es6,先看其它教程安装好babel，这里主要记录基于html-webpack-plugin的多页面配置

html-webpack-plugin 的配置

首先装好html-webpack-plugin，在webpack.config.js 配置2个入口文件，和滤镜中2个出口文件(即生成2个页面)

注意入口配置的键名前面加目录，打包之后js会按路径存放 或者在出口的filename右边加个目录也可以

const path = require('path')

const HtmlWebpackPlugin = require('html-webpack-plugin')

const MiniCssExtractPlugin = require("mini-css-extract-plugin")

//配置项

module.exports = \{

entry : \{

'index' : \_\_dirname + '/src/index.js',

'main' : \_\_dirname + '/src/main.js',

'jqueryv183min' :\_\_dirname + '/src/jqueryv183min.js'

\},

output:\{

path: \_\_dirname + '/dist',

filename:'js/\[name\].js',

publicPath:'/',

\},

devServer:\{

contentBase:path.resolve(\_\_dirname,'./src'),

host:'localhost',

compress:false,

port:8100,

hot:false

\},

module:\{

rules:\[

test: /.js$/,

loader: 'babel-loader?presets=es2015',

\},

test: /\\.(htm|html)$/i,

loader: 'html-withimg-loader'

\},

test:/\\.(jpg|png|gif|svg)$/,

//小于1024的图片都用base64的方式加载

loader: 'url-loader',

options: \{

limit: 1024,

outputPath:'images/'

\},

test: /\\.css$/,

loader:\[MiniCssExtractPlugin.loader,'css-loader'\]

\},

plugins:\[

new HtmlWebpackPlugin(\{

template: \_\_dirname + "/src/index.html",

filename:'index.html',

title:'哈哈',

chunks:\['jqueryv183min','index'\],

//按上面的chunks数组顺序来插入js文件

chunksSortMode: 'manual',

minify:true,

hash:true //这样资源扩展名后面会增加hash值

\}),

new HtmlWebpackPlugin(\{

template: \_\_dirname + "/src/main.html",

filename:'main.html',

title:'嘿嘿',

chunks:\['main'\],

chunksSortMode: 'manual'

\}),

new MiniCssExtractPlugin(\{

filename: "css/\[name\].css",

chunkFilename: "\[id\].css"

\})

打包命令：webpack

关于打包后的各种文件路径：

在出口配置里添加一项publicPath:'/'，即html模板中的所有资源引用路径，css中的图片路径，打包之后所有相对路径都会替换成这个路径，所以注意开发时的路径配置

关于html-webpack-plugins中chunks块的排序：

加入chunksSortMode: 'manual',  (记得修改了webpack.config.js要重新启动dev,开发模式下才能即时生效)

webapck-dev-server配置：

devServer:\{

contentBase:path.resolve(\_\_dirname,'./src'),

host:'localhost',

compress:false,

port:8100,

hot:false

\},

关于webpack 4.x以上的开发模式(快速自动刷新)

在package.json里面script中加入一条：

"dev": "webpack-dev-server --mode development",

然后运行cnpm run dev

html中显示图片，打包到文件夹

首先安装file-loader、url-loader、(url-loader内置了file-loader) html-withimg-loader(这个好像不能安装在dev下？)

在module:\{rules\[\]\}中加入2个规则：

test: /\\.(htm|html)$/i,

loader: 'html-withimg-loader'

\},

test:/\\.(jpg|png|gif|svg)$/,

//小于1024的图片都用base64的方式加载

loader: 'url-loader',

options: \{

limit: 1024,

outputPath:'images/'

以模块方式加载css文件，抽离为css文件独立打包

旧的是用extract-text-webpack-plugin，而4.0以上已经废弃，使用mini-css-extract-plugin

首先安装 cnpm i style-loader css-loader mini-css-extract-plugin --save-dev

要在入口文件中引入css文件(只能以这个方式引入css,并且html-webpack-plugin会自动加载？)：import idxcss from './css/base.css'

规则中添加

test: /\\.css$/,

loader:\[MiniCssExtractPlugin.loader,'css-loader'\]

滤镜中添加

new MiniCssExtractPlugin(\{

filename: "css/\[name\].\[chunkhash:8\].css",

chunkFilename: "\[id\].css"

\})

这样css中的图片也会被打包到css目录

清空打包目录clean-webpack-plugin

安装插件  clean-webpack-plugin

const cleanWebpackPlugin = require('clean-webpack-plugin')

new cleanWebpackPlugin(

\['dist/\*.\*','dist/css/\*.\*','dist/js/\*.\*'\],　 //匹配删除的文件

root: \_\_dirname, 　　　　　　　　　　//根目录

verbose: true, 　　　　　　　　　　//开启在控制台输出信息

dry: false 　　　　　　　　　　//启用删除文件

)

//注，上面要匹配文件的方式来写，不可直接写一个dist目录

//网上很多不负责的文章，就直接扔一个dist进去

复制静态文件

当有一些不参与打包的文件时，使用此插件：copy-webpack-plugin

const CopyWebpackPlugin=require('copy-webpack-plugin');

new CopyWebpackPlugin(\[\{

from: \_\_dirname + '/src/static',

to: \_\_dirname + '/dist/static'

\}\])

启用静态http服务器查看打包效果

为了统一各种静态资源的路径，在出口配置中加入publicPathc :'/' ，所有相对路径资源都会转换成根目录路径

这时，全局安装cnpm i -g http-server，进入打包目录 执行 http-server ，即可启动静态http服务器

webpack前置知识1&lpar;模块化开发&rpar;

webpack前置知识1(模块化开发) 新建 模板 小书匠  在开始对模块化开发进行讲解之前,我们需要有这么一个认识,即 在没有过多第三方干扰时,成本低收益高的事物更容易获得推广和信赖. 模块化开发就 ...

初学seaJs模块化开发，利用grunt打包，减少http请求

webpack打包HTML配置自动,记webpack下进行普通模块化开发基础配置（自动打包生成html、多入口多页面）...

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关利用Webpack进行js模块化、CSS以及HTML的打包

相关 web前端高级webpack - webpack的手动配置及多入口多出口打包

相关 webpack打包HTML配置自动,记webpack下进行普通模块化开发基础配置（自动打包生成html、多入口多页面）...

相关 html-webpack-plugin插件自动生成html页面

相关 webpack 自动打包更新

相关 Webpack打包HTML

相关 Jenkins自动打包页面描述支持Html配置

相关 2.【webpack】打包编译生成html

相关 webpack多页面打包配置

相关 webpack4 多页面打包