admin管理员组文章数量:1566466
写本记时(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(模块化开发)
webpack前置知识1(模块化开发) 新建 模板 小书匠 在开始对模块化开发进行讲解之前,我们需要有这么一个认识,即 在没有过多第三方干扰时,成本低收益高的事物更容易获得推广和信赖. 模块化开发就 ...
初学seaJs模块化开发,利用grunt打包,减少http请求
版权声明:本文标题:webpack打包HTML配置自动,记webpack下进行普通模块化开发基础配置(自动打包生成html、多入口多页面)... 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1727561820a1121117.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论