webpack4 前端框架基础配置实例-解决css分离图片路径问题
1.安装nodejs
2. 需要全局和项目安装webpack和webpack-dev-server
npm install webpack webpack-dev-server -g
npm install webpack webpack-dev-server --save-dev
本框架的功能如下：
1、babel babel-folyfill 处理js
2、css、less 自动编译成css文件并添加前缀
3、less语法编译
4、图片处理
5、开发环境页面自动刷新
6、resolve 解析
7、引用HTML模板
8、css分离
9、打包优化，大文件拆分
10、原生ajax请求（get、post）
11、纯原生分页
文件目录结构如图所示：
项目github地址：https://github.com/HelloWoed/webpack-project-demo
说明一下：由于使用了css分离，会导致css背景图片和html img标签图片路径出错问题，这里的解决办法是：css中使用的图片用assets/static/images中的图片，css-loader配置的options中url：false，这样在解析css时就不会处理css图片路径，
{
test:/\.less$/,
use: ExtractTextWebpackPlugin.extract({
fallback:'style-loader',
use:[
{
loader:'css-loader',
options:{
url:false,
importLoaders:1
}
},
'postcss-loader',
'less-loader'
],
publicPath: '../css'
}),
exclude: path.resolve(__dirname,'./node_modules')
},
最后将static目录拷贝到相应的打包目录（这里使用的是 copy-webpack-plugin 插件）static目录为你静态数据目录
new copyWebpackPlugin([
{
from:__dirname+'/src/assets/static',//打包的静态资源目录地址
to:'./static' //打包到dist下面的static
}
]),
package.json配置文件如下：
{
"name": "testwebpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode production --watch --progress --display-reasons --color",
"dev": "webpack-dev-server --inline --progress --mode development"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.1.2",
"@babel/preset-env": "^7.1.0",
"autoprefixer": "^9.2.1",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.4",
"babel-polyfill": "^6.26.0",
"clean-webpack-plugin": "^0.1.19",
"css-loader": "^1.0.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^2.0.0",
"html-webpack-plugin": "^3.2.0",
"html-withimg-loader": "^0.1.16",
"less": "^3.8.1",
"less-loader": "^4.1.0",
"postcss-loader": "^3.0.0",
"style-loader": "^0.23.1",
"url-loader": "^1.1.2",
"webpack": "^4.21.0",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.9"
}
}
webpack.config.js文件配置如下：（有很多配置项可根据具体情况设置，不用全部配置）
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
// 拆分css样式的插件
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const copyWebpackPlugin = require('copy-webpack-plugin');
function resolve (dir) {
return path.join(__dirname, './', dir)
}
console.log(resolve ('abcdefghijklmnop'));
module.exports = {
mode:'development',
// entry:['babel-polyfill','./main.js'],//可以有多个入口文件
entry:{
babelPolyfill:'babel-polyfill',//添加了这个东西，才能完美的将ES6转码,否则Babel默认只转换新的JavaScript句法（syntax），而不转换新的API，如：Set Map
app:'./main.js',//可以有多个入口文件
},
output:{
path:path.resolve(__dirname,"dist"),//输出文件路径 path:path.join(__dirname,"dist","js")
filename:"./js/[name].bundle.js",//"[name].[chunckhash].bundle.js" 输出的文件名称
},
devtool: 'inline-source-map',
resolve: {
extensions: ['.js', '.json'],
alias: {
'@': resolve('src'),
}
},
//在webpack4之前，提取公共代码都是通过一个叫CommonsChunkPlugin的插件来办到的。到了webpack4以后，内置了一个一模一样的功能，就是所谓的“优化”
// optimization: { // 提取公共代码
// splitChunks: {
// cacheGroups: {
// vendor: { // 剥离第三方插件
// test: /node_modules/, // 指定是node_modules下的第三方包
// chunks: 'initial',
// name: 'vendor', // 打包后的文件名，随意命名
// priority: 10 // 设置优先级，防止和自定义的公共代码提取时被覆盖，不进行打包
// },
// utils: { // 抽离自己写的公共代码，utils这个名字可以随意起
// chunks: 'initial',
// name: 'utils', // 任意命名
// minSize: 0 // 只要超出0字节就生成一个新包
// }
// }
// }
// },
performance: {
hints: "warning", // 枚举
maxAssetSize: 30000000, // 整数类型（以字节为单位）
maxEntrypointSize: 50000000, // 整数类型（以字节为单位）
assetFilter: function(assetFilename) {
// 提供资源文件名的断言函数
return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
}
},
module:{
rules:[
{
test:/\.js$/,
exclude: /node_modules/,//有变化了处理，没有变化则不处理
// include:[resolve('src'), resolve('test')],//需要处理的文件夹
loader:"babel-loader"
},
{
test:/\.css$/,
// loader:"style-loader!css-loader",
use: ExtractTextWebpackPlugin.extract({
// 将css用link的方式引入就不再需要style-loader了
fallback: "style-loader",
use:[
{
loader:'css-loader',
options:{
url:false, //false css中加载图片的路径将不会被解析 不会改变
importLoaders:1
}
},
'postcss-loader',
],
publicPath: '../css'
})
// use: [ //以行内样式style的标签写进打包后的html页面中
// {
// loader: "style-loader"
// },
// {
// loader: "css-loader",
// options: {
// modules: true, // 指定启用css modules
// localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的类名格式
// }
// },
// {
// loader: "postcss-loader"
// }
// ]
},
{
test:/\.less$/,
use: ExtractTextWebpackPlugin.extract({
fallback:'style-loader',
use:[
{
loader:'css-loader',
options:{
url:false,
importLoaders:1
}
},
'postcss-loader',
'less-loader'
],
publicPath: '../css'
}),
exclude: path.resolve(__dirname,'./node_modules')
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: "[name].[hash:4].[ext]",
outputPath: "./images",//打包后图片文件输出路径
publicPath:'./images'
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'media/[name].[hash:7].[ext]'
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'fonts/[name].[hash:7].[ext]'
}
},
{ //页面中会用到img标签，img引用的图片地址也需要一个loader来处理,这样再打包后的html文件下img就可以正常引用图片路径了
test: /\.(htm|html)$/,
use: 'html-withimg-loader'
}
]
},
plugins:[
// 打包前先清空
new CleanWebpackPlugin('dist/') ,
new ExtractTextWebpackPlugin({ //样式文件单独打包
filename: "./css/[name].min.css", //指定生成的文件名称
disable: false, //是否禁用此插件
allChunks: true
}),
new HtmlWebpackPlugin({
template:"./index.html",//本地模板文件的位置，支持加载器(如handlebars、ejs、undersore、html等)，如比如 handlebars!src/index.hbs；
filename: './index.html',//输出文件的文件名称，默认为index.html，不配置就是该文件名；此外，还可以为输出文件指定目录位置（例如'html/index.html'）
title: 'Webpack App',//生成的html文档的标题
chunks:["app"],
inject:true,//1、true或者body：所有JavaScript资源插入到body元素的底部2、head: 所有JavaScript资源插入到head元素中3、false： 所有静态资源css和JavaScript都不会注入到模板文件中
showErrors:true,//是否将错误信息输出到html页面中
hash:true,//是否为所有注入的静态资源添加webpack每次编译产生的唯一hash值
minify: false,//传递 html-minifier 选项给 minify 输出
favicon: "",//添加特定的 favicon 路径到输出的 HTML 文件中。
}),
new copyWebpackPlugin([
{
from:__dirname+'/src/assets/static',//打包的静态资源目录地址
to:'./static' //打包到dist下面的static
}
]),
],
devServer: {
publicPath: '/',//
contentBase: path.resolve(__dirname, 'dist'),//此处的路径必须和输出output文件的路径一致 否则无法自动更新，或者是基于output的相对路径
compress: true,
historyApiFallback: true,//在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html
inline: true,//设置为true，当源文件改变时会自动刷新页面
// grogress: true,
host: 'localhost',// 默认是localhost
port: 9000,//指定用于侦听请求的端口号
open:true,//当open启用时，开发服务器将打开浏览器。
//hot: true,// 开启热更新，开启热加载还需在主入口js文件中配置
// openPage:'index.html',//指定在打开浏览器时导航到的页面。
overlay: {//当存在编译器错误或警告时，在浏览器中显示全屏覆盖,显示警告和错误：
warnings: true,
errors: true
},
proxy: {//代理配置
'/api': {
target: 'http://localhost:3000',
pathRewrite: {'^/api' : ''},//如果不想/api传递，我们需要重写路径
}
},
}
}
postcss.config.js文件配置如下：
module.exports = {
plugins: [
require('autoprefixer')
]
}
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
// 拆分css样式的插件
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const copyWebpackPlugin = require('copy-webpack-plugin');
function resolve (dir) {
return path.join(__dirname, './', dir)
}
console.log(resolve ('abcdefghijklmnop'));
module.exports = {
mode:'development',
// entry:['babel-polyfill','./main.js'],//可以有多个入口文件
entry:{
babelPolyfill:'babel-polyfill',//添加了这个东西，才能完美的将ES6转码,否则Babel默认只转换新的JavaScript句法（syntax），而不转换新的API，如：Set Map
app:'./main.js',//可以有多个入口文件
},
output:{
path:path.resolve(__dirname,"dist"),//输出文件路径 path:path.join(__dirname,"dist","js")
filename:"./js/[name].bundle.js",//"[name].[chunckhash].bundle.js" 输出的文件名称
},
devtool: 'inline-source-map',
resolve: {
extensions: ['.js', '.json'],
alias: {
'@': resolve('src'),
}
},
//在webpack4之前，提取公共代码都是通过一个叫CommonsChunkPlugin的插件来办到的。到了webpack4以后，内置了一个一模一样的功能，就是所谓的“优化”
// optimization: { // 提取公共代码
// splitChunks: {
// cacheGroups: {
// vendor: { // 剥离第三方插件
// test: /node_modules/, // 指定是node_modules下的第三方包
// chunks: 'initial',
// name: 'vendor', // 打包后的文件名，随意命名
// priority: 10 // 设置优先级，防止和自定义的公共代码提取时被覆盖，不进行打包
// },
// utils: { // 抽离自己写的公共代码，utils这个名字可以随意起
// chunks: 'initial',
// name: 'utils', // 任意命名
// minSize: 0 // 只要超出0字节就生成一个新包
// }
// }
// }
// },
performance: {
hints: "warning", // 枚举
maxAssetSize: , // 整数类型（以字节为单位）
maxEntrypointSize: , // 整数类型（以字节为单位）
assetFilter: function(assetFilename) {
// 提供资源文件名的断言函数
return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
}
},
module:{
rules:[
{
test:/\.js$/,
exclude: /node_modules/,//有变化了处理，没有变化则不处理
// include:[resolve('src'), resolve('test')],//需要处理的文件夹
loader:"babel-loader"
},
{
test:/\.css$/,
// loader:"style-loader!css-loader",
use: ExtractTextWebpackPlugin.extract({
// 将css用link的方式引入就不再需要style-loader了
fallback: "style-loader",
use:[
{
loader:'css-loader',
options:{
url:false, //false css中加载图片的路径将不会被解析 不会改变
importLoaders:
}
},
'postcss-loader',
],
publicPath: '../css'
})
// use: [ //以行内样式style的标签写进打包后的html页面中
// {
// loader: "style-loader"
// },
// {
// loader: "css-loader",
// options: {
// modules: true, // 指定启用css modules
// localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的类名格式
// }
// },
// {
// loader: "postcss-loader"
// }
// ]
},
{
test:/\.less$/,
use: ExtractTextWebpackPlugin.extract({
fallback:'style-loader',
use:[
{
loader:'css-loader',
options:{
url:false,
importLoaders:
}
},
'postcss-loader',
'less-loader'
],
publicPath: '../css'
}),
exclude: path.resolve(__dirname,'./node_modules')
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: ,
name: "[name].[hash:4].[ext]",
outputPath: "./images",//打包后图片文件输出路径
publicPath:'./images'
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: ,
name: 'media/[name].[hash:7].[ext]'
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: ,
name: 'fonts/[name].[hash:7].[ext]'
}
},
{ //页面中会用到img标签，img引用的图片地址也需要一个loader来处理,这样再打包后的html文件下img就可以正常引用图片路径了
test: /\.(htm|html)$/,
use: 'html-withimg-loader'
}
]
},
plugins:[
// 打包前先清空
new CleanWebpackPlugin('dist/') ,
new ExtractTextWebpackPlugin({ //样式文件单独打包
filename: "./css/[name].min.css", //指定生成的文件名称
disable: false, //是否禁用此插件
allChunks: true
}),
new HtmlWebpackPlugin({
template:"./index.html",//本地模板文件的位置，支持加载器(如handlebars、ejs、undersore、html等)，如比如 handlebars!src/index.hbs；
filename: './index.html',//输出文件的文件名称，默认为index.html，不配置就是该文件名；此外，还可以为输出文件指定目录位置（例如'html/index.html'）
title: 'Webpack App',//生成的html文档的标题
chunks:["app"],
inject:true,//1、true或者body：所有JavaScript资源插入到body元素的底部2、head: 所有JavaScript资源插入到head元素中3、false： 所有静态资源css和JavaScript都不会注入到模板文件中
showErrors:true,//是否将错误信息输出到html页面中
hash:true,//是否为所有注入的静态资源添加webpack每次编译产生的唯一hash值
minify: false,//传递 html-minifier 选项给 minify 输出
favicon: "",//添加特定的 favicon 路径到输出的 HTML 文件中。
}),
new copyWebpackPlugin([
{
from:__dirname+'/src/assets/static',//打包的静态资源目录地址
to:'./static' //打包到dist下面的static
}
]),
],
devServer: {
publicPath: '/',//
contentBase: path.resolve(__dirname, 'dist'),//此处的路径必须和输出output文件的路径一致 否则无法自动更新，或者是基于output的相对路径
compress: true,
historyApiFallback: true,//在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html
inline: true,//设置为true，当源文件改变时会自动刷新页面
// grogress: true,
host: 'localhost',// 默认是localhost
port: ,//指定用于侦听请求的端口号
open:true,//当open启用时，开发服务器将打开浏览器。
//hot: true,// 开启热更新，开启热加载还需在主入口js文件中配置
// openPage:'index.html',//指定在打开浏览器时导航到的页面。
overlay: {//当存在编译器错误或警告时，在浏览器中显示全屏覆盖,显示警告和错误：
warnings: true,
errors: true
},
proxy: {//代理配置
'/api': {
target: 'http://localhost:3000',
pathRewrite: {'^/api' : ''},//如果不想/api传递，我们需要重写路径
}
},
}
}
webpack4 前端框架基础配置实例-解决css分离图片路径问题的更多相关文章
- webpack配置：图片处理、css分离和路径问题
一.CSS中的图片处理: 1.首先在网上随便找一张图片,在src下新建images文件夹,将图片放在文件夹内 2.在index.html中写入代码:<div id="pic" ...
- 测试开发之Django——No4.Django中前端框架的配置与添加
我们在开发一个web项目的时候,虽然我们不是专业开发,但是我们也想要做出来一个美美的前端页面. 这种时候,百度上铺天盖地的前端框架就是我们的最好选择了. 当然,在网上直接下载的框架,我们是不能直接用的 ...
- 前端读者 | 前端面试基础手册（HTML+CSS）
本文来自@羯瑞:希望前端面试基础手册能帮助要找工作的前端小伙伴~~ HTML 前端需要注意哪些SEO? 合理的title.description.keywords:搜索对着三项的权重逐个减小,titl ...
- 自动化测试平台（Vue前端框架安装配置）
Vue简介: 通俗的来说Vue是前端框架,用来写html的框架,可轻量级也可不轻量级 Vue特性: 绑定性,响应性,实时性,组件性 安装软件以及控件: 控件库:element-ui node.js ( ...
- Vue前端框架基础+Element的使用
前置内容: AJAX基础+Axios快速入门+JSON使用 目录 1.VUE 1.1 概述 1.2 快速入门 1.3 Vue指令 1.3.1 v-bind & v-model 指令 1.3.2 ...
- 2015年最热门前端框架React 入门实例教程
现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...
- MVC中用 BundleCollection 压缩CSS时图片路径问题
MVC中有个专门提供JS和CSS压缩的类,BundleCollection,其实这个类也可以在asp.net中用, 关于BundleCollection类的详细推荐个地址:http://www.cnb ...
- ruby -- 进阶学习（十四）设置background-image(解决无法获取图片路径问题)
基于rails4.0环境 为了美化界面,添加背景图片,于是又傻逼了一回~~ 一开始在xxx.html.erb中添加:(注:图片的路径为:app/asssets/images/background.jp ...
- 2.5 Nginx服务器基础配置实例
pay平台nginx配置文件详解 ###全局块### user www www; #指定运行worker process 的用户和用户组 worker_processes 4; #指定Nginx开 ...
随机推荐
- 使用MyBatis在控制台动态打印执行的sql语句
使用MyBatis进行数据库操作的时候,sql语句都是写在相应的mapper文件中,参数也是使用占位符取值表示的,mapper文件中看不到实时执行的完整sql,有时候sql语句错误或者参数类型不对的时 ...
- 微信小程序开发--API界面交互
一.wx:showActionSheet(上拉菜单) 属性 类型 默认值 必填 说明 itemList Array.<string> 是 按钮的文字数组,数组长度最大为 6 itemC ...
- 【题解】P2916 [USACO08NOV]安慰奶牛Cheering up the Cow-C++
原题传送门 这道题用最小生成树来完成,我选用的是kruskal(克鲁斯卡尔)来完成.这道题目在克鲁斯卡尔模板的基础上,有变动的地方只有2处:1.因为必须从一个点出发,而最小生成树最后会让所有点都连通, ...
- [Linxu] Ubuntu下载mysql
//下载: sudo apt install mysql-server sudo apt install mysql-client sudo apt install libmysqlclient-de ...
- python 中_init_函数以及参数self
1)class类包含: 类的属性:类中所涉及的变量 类的方法:类中函数 2)_init_函数(方法) 1.首先说一下,带有两个下划线开头的函数是声明该属性为私有,不能在类地外部被使用或直接访问. 2. ...
- 数据结构-哈夫曼树（python实现）
好,前面我们介绍了一般二叉树.完全二叉树.满二叉树,这篇文章呢,我们要介绍的是哈夫曼树. 哈夫曼树也叫最优二叉树,与哈夫曼树相关的概念还有哈夫曼编码,这两者其实是相同的.哈夫曼编码是哈夫曼在1952年 ...
- .NET Core CSharp初级篇 1-6 类的多态与继承
.NET Core CSharp初级篇 1-6 本节内容为类的多态与继承 简介 终于讲到了面向对象三大特性中的两大特性--继承与多态.通过继承与多态,我们能很好的将类的拓展性发挥到了极致.在下面的内容 ...
- 解决 document.getElementsByClassName 在 IE8 下的兼容下的问题
H5中新增了一个令人期待已久的方法:getElementsByClassName,这个方法让我们可以通过 class 属性中的类名来访问元素,这是极好的. but! 这个方法在IE9以下的浏览器是不支 ...
- Vue模板语法与常用指令
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数,结合相应系统,在应用状态改变时 ...
- paddlepaddle实现猫狗分类
目录 1.预备工作 1.1 数据集准备 1.2 数据预处理 2.训练 2.1 模型 2.2 定义训练 2.3 训练 3.预测 4.参考文献 声明:这是我的个人学习笔记,大佬可以点评,指导,不喜勿喷.实 ...