标签：webpack4 const require 配置 js webpack loader css 页面
webpack4 多页面 多环境配置
使用 webpack4 + 原生html ，搭建多页面应用（例如：app配套的活动项目）
项目目录：
build
|-envs.js
|-rules.js
|-webpack.base.conf.js
|-webpack.dev.conf.js
|-webpack.prod.conf.js
|-webpack.test.conf.js
src
|-commom
|-css
|-js
|-pages
|-home
|-home.js
|-index.html
|-index.js
|-index.scss
|-static
|-images
|-home
|-1.png
oss.js
postcss.config.js
package.json
主要配置 build 中的文件
一、envs.js
多环境
'use strict'
const path = require('path')
/*
* 环境列表，第一个环境为默认环境
* envName: 指明现在使用的环境
* dirName: 打包的路径，只在build的时候有用
* baseUrl: 这个环境下面的api 请求的域名
* assetsPublicPath: 静态资源存放的域名，未指定则使用相对路径
* */
const ENV_LIST = [
{
// 本地开发环境
envName: 'dev',
dirName: 'dev',
baseUrl: '',
assetsPublicPath: '/'
},
{
// 测试环境
envName: 'test',
dirName: path.resolve(__dirname, '../dist_h5'),
baseUrl: '',
assetsPublicPath: '/'
},
{
// 生产环境（命令行参数（process.arg）中prod是保留字，所以使用pro）
envName: 'pro',
dirName: path.resolve(__dirname, '../dist_h5'),
baseUrl: '',
assetsPublicPath: './'
},
]
//获取环境，即--mode后的环境
const HOST_ENV = JSON.parse(process.env.npm_config_argv).original[3] || ""
//没有设置环境，则默认为第一个
const HOST_CONF = HOST_ENV ? ENV_LIST.find(item => item.envName === HOST_ENV) : ENV_LIST[0]
// 把环境常量挂载到process.env方便客户端使用
process.env.BASE_URL = HOST_CONF.baseUrl
module.exports.HOST_CONF = HOST_CONF
module.exports.ENV_LIST = ENV_LIST
二、rules.js
公共工具
const extractTextPlugin = require("extract-text-webpack-plugin");
const rules = [{
test: /\.(css|scss|sass)$/,
// 区别开发环境和生成环境
use: process.env.NODE_ENV === "development" ? ["style-loader", "css-loader", "sass-loader", "postcss-loader"] : extractTextPlugin
.extract({
fallback: "style-loader",
use: ["css-loader", "sass-loader", "postcss-loader"],
// css中的基础路径
publicPath: "../"
})
},
{
test: /\.js$/,
use: [{
loader: "babel-loader"
}],
// 不检查node_modules下的js文件
// exclude: "/node_modules/"
}, {
test: /\.(png|jpg|gif)$/,
use: [{
// 需要下载url-loader
loader: "url-loader?limit=100&outputPath=./static/images&name=[name].[ext]",
//新版本的url-loader的limit属性有时无效,故隐藏下方属性
// options: {
// limit: 5000 , //小于这个时将会已base64位图片打包处理
// // 图片文件输出的文件夹
// publicPath: "./",
// outputPath: "./static/images"
// }
}]
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
use: [{
// 需要下载url-loader
loader: 'file-loader?limit=100&outputPath=./static/audio&name=[name].[ext]&publicPath=./static/audio',
}]
},
{
test: /\.html$/,
// html中的img标签
use: {
loader: 'html-loader',
options: {
attrs: ['img:src', 'img:data-src', 'audio:src'],
minimize: true
}
}
},
// {
// test: /\.mp3$/i,
// use: 'file-loader'
// },
];
module.exports = rules;
三、webpack.base.conf.js
const path = require('path');
const webpack = require("webpack");
const glob = require("glob");
require("./envs");
//消除冗余的css
const purifyCssWebpack = require("purifycss-webpack");
// html模板
const htmlWebpackPlugin = require("html-webpack-plugin");
//静态资源输出
const copyWebpackPlugin = require("copy-webpack-plugin");
const rules = require("./rules");
// 获取html-webpack-plugin参数的方法
// 配合htmlwebpackplugin,htmlwebpackplugin需要一些配置，而多页面应用就需要产出多个同配置但是不同名的html文件，这个方法就是用传入的参数而产生不同的页面名配置。
function getHtmlConfig(name, chunks) {
return {
template: `./src/pages/${name}/index.html`,
filename: process.env.NODE_ENV === "development" ? `${name.slice(name.lastIndexOf('/') + 1)}.html` : `${name.slice(name.lastIndexOf('/') + 1)}.html`,
inject: true,
hash: false, //开启hash ?[hash]
chunks: chunks,
minify: process.env.NODE_ENV === "development" ? false : {
removeComments: true, //移除HTML中的注释
collapseWhitespace: true, //折叠空白区域 也就是压缩代码
removeAttributeQuotes: true, //去除属性引用
},
};
};
// 获取到我们pages下各个页面的index.js,然后返回一个对象,不用手动添加
function getEntry() {
var entry = {};
//读取src目录所有page入口
glob.sync('./src/pages/**/index.js')
.forEach(function (name) {
var start = name.indexOf('src/') + 4,
end = name.length - 3;
var eArr = [];
var n = name.slice(start, end);
n = n.slice(0, n.lastIndexOf('/')); //保存各个组件的入口
n = n.split('pages/')[1];
eArr.push(name);
entry[n] = eArr;
});
return entry;
};
module.exports = {
entry: getEntry(),
module: {
rules: [...rules]
},
resolve: {
alias: {
'@': path.resolve(__dirname, '../src')
}
},
//将外部变量或者模块加载进来
externals: {
// 'jquery': 'window.jQuery'
},
// 提取公共代码
optimization: {
splitChunks: {
cacheGroups: {
vendor: { // 抽离第三方插件
test: /node_modules/, // 指定是node_modules下的第三方包
chunks: 'initial',
name: 'vendor', // 打包后的文件名，任意命名
// 设置优先级，防止和自定义的公共代码提取时被覆盖，不进行打包
priority: 10
},
utils: { // 抽离自己写的公共代码
chunks: 'initial',
name: 'common', // 任意命名
minSize: 0, // 只要超出0字节就生成一个新包
minChunks: 2
}
}
}
},
plugins: [
//静态资源输出
new copyWebpackPlugin([{
from: path.resolve(__dirname, "../src/static"),
to: './static',
ignore: ['.*']
}]),
// 消除冗余的css代码
new purifyCssWebpack({
paths: glob.sync(path.join(__dirname, "../src/pages/*/*.html"))
})
]
}
//配置页面
const entryObj = getEntry();
const htmlArray = [];
Object.keys(entryObj).forEach(element => {
htmlArray.push({
_html: element,
title: '',
chunks: ['vendor', 'common', element]
})
})
//自动生成html模板
htmlArray.forEach((element) => {
module.exports.plugins.push(new htmlWebpackPlugin(getHtmlConfig(element._html, element.chunks)));
})
四、webpack.dev.conf.js
本地开发环境
const path = require('path');
const webpack = require("webpack");
const merge = require("webpack-merge");
const webpackConfigBase = require('./webpack.base.conf');
const webpackConfigDev = {
mode: 'development', // 通过 mode 声明开发环境
output: {
path: path.resolve(__dirname, '../dist_h5'),
// 打包多出口文件
filename: 'js/[name].[hash:5].js'
},
devServer: {
contentBase: path.join(__dirname, "../src/pages/index"),
publicPath: '/',
host: "0.0.0.0", //这里修改自己电脑ip
port: "9088",
overlay: true, // 浏览器页面上显示错误
// open: true, // 开启浏览器
// stats: "errors-only", //stats: "errors-only"表示只打印错误：
//服务器代理配置项
proxy: {
'/testing/*': {
target: '',
secure: true,
changeOrigin: true
}
}
}
}
module.exports = merge(webpackConfigBase, webpackConfigDev);
五、webpack.test.conf.js
线上测试环境
const path = require('path');
const webpack = require("webpack");
const merge = require("webpack-merge");
// 清除目录等
const cleanWebpackPlugin = require("clean-webpack-plugin");
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const extractTextPlugin = require("extract-text-webpack-plugin");
const webpackConfigBase = require('./webpack.base.conf');
const WebpackAliyunOss = require('webpack-aliyun-oss')
const Oss = require('../oss')
const webpackConfigProd = {
mode: 'development', // 通过 mode 声明生产环境
output: {
path: path.resolve(__dirname, '../dist_h5'),
// 打包多出口文件
filename: 'js/[name].[hash].js',
publicPath: './'
},
// 将js代码转化为字符串，此操作会影响后续js代码删除console
// devtool: 'cheap-module-eval-source-map',
plugins: [
//删除dist_h5目录
new cleanWebpackPlugin(['dist_h5'], {
root: path.resolve(__dirname, '../'), //根目录
verbose: true, //开启在控制台输出信息
dry: false,
}),
new webpack.DefinePlugin({
'process.env.BASE_URL': '\"' + process.env.BASE_URL + '\"'
}),
// 分离css插件参数为提取出去的路径
new extractTextPlugin({
filename: 'css/[name].[hash:8].min.css',
}),
//压缩css
new OptimizeCSSPlugin({
cssProcessorOptions: {
safe: true
}
}),
// 自动上传至阿里云服务器
new WebpackAliyunOss({
from: './dist_h5/**',
dist: '/ost/test/',
region: Oss.region,
accessKeyId: Oss.accessKeyId,
accessKeySecret: Oss.accessKeySecret,
bucket: Oss.bucket,
// test: true,
setOssPath: filePath => {
// some operations to filePath
const index = filePath.lastIndexOf('dist_h5')
// 7为 dist_h5 字符串的长度
const Path = filePath.substring(index + 7, filePath.length)
return Path.replace(/\\/g, '/')
},
setHeaders: filePath => {
// some operations to filePath
// return false to use default header
return {
'Cache-Control': 'max-age=31536000'
}
}
})
]
}
module.exports = merge(webpackConfigBase, webpackConfigProd);
六、webpack.prod.conf.js
生产环境
const path = require('path');
const webpack = require("webpack");
const merge = require("webpack-merge");
// 清除目录等
const cleanWebpackPlugin = require("clean-webpack-plugin");
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const extractTextPlugin = require("extract-text-webpack-plugin");
const webpackConfigBase = require('./webpack.base.conf');
const webpackConfigProd = {
mode: 'production', // 通过 mode 声明生产环境
output: {
path: path.resolve(__dirname, '../dist_h5'),
// 打包多出口文件
filename: 'js/[name].[hash].js',
publicPath: './'
},
// 将js代码转化为字符串，此操作会影响后续js代码删除console
// devtool: 'cheap-module-eval-source-map',
plugins: [
//删除dist_h5目录
new cleanWebpackPlugin(['dist_h5'], {
root: path.resolve(__dirname, '../'), //根目录
verbose: true, //开启在控制台输出信息
dry: false,
}),
new webpack.DefinePlugin({
'process.env.BASE_URL': '\"' + process.env.BASE_URL + '\"'
}),
// 分离css插件参数为提取出去的路径
new extractTextPlugin({
filename: 'css/[name].[hash:8].min.css',
}),
//压缩css
new OptimizeCSSPlugin({
cssProcessorOptions: {
safe: true
}
}),
// 上线压缩 去除console等信息webpack4.x之后去除了webpack.optimize.UglifyJsPlugin
new UglifyJSPlugin({
uglifyOptions: {
output: {
comments: false // 去除注释
},
compress: {
warnings: false,
drop_debugger: false,
drop_console: true, // 去除console
}
}
}),
],
}
module.exports = merge(webpackConfigBase, webpackConfigProd);
七、package.json
包管理
{
"name": "h5",
"version": "1.0.8",
"description": "",
"main": "index.js",
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.dev.conf.js",
"build:test": "cross-env webpack --config build/webpack.test.conf.js",
"build:pro": "cross-env webpack --config build/webpack.prod.conf.js"
},
"license": "ISC",
"devDependencies": {
"autoprefixer": "^8.5.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-3": "^6.24.1",
"clean-webpack-plugin": "^0.1.19",
"copy-webpack-plugin": "^4.6.0",
"cross-env": "^5.1.5",
"css-loader": "^3.2.0",
"exports-loader": "^0.7.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^1.1.11",
"glob": "^7.1.3",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"html-withimg-loader": "^0.1.16",
"live-server": "^1.2.0",
"mini-css-extract-plugin": "^0.8.0",
"node-sass": "^4.9.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"postcss-import": "^11.1.0",
"postcss-loader": "^2.1.5",
"postcss-plugin-px2rem": "^0.8.1",
"postcss-url": "^7.3.2",
"purify-css": "^1.2.5",
"purifycss-webpack": "^0.7.0",
"raw-loader": "^4.0.2",
"sass-loader": "^7.0.1",
"script-loader": "^0.7.2",
"style-loader": "^0.21.0",
"uglify-js": "^3.12.8",
"uglifyjs-webpack-plugin": "^1.3.0",
"url-loader": "^0.5.9",
"webpack": "^4.29.6",
"webpack-aliyun-oss": "^0.3.1",
"webpack-bundle-analyzer": "^3.6.0",
"webpack-cli": "^3.1.1",
"webpack-dev-server": "^3.1.4",
"webpack-merge": "^4.1.2"
},
"dependencies": {
"axios": "^0.19.0",
"callapp-lib": "^3.1.3",
"jquery": "^3.5.1",
"qrcode": "^1.4.4",
"reset-css": "^5.0.1"
},
"browserslist": [
"defaults",
"not ie < 11",
"last 2 versions",
"> 1%",
"iOS 7",
"last 3 iOS versions"
]
}
八、postcss.config.js
rem布局配置
module.exports = {
plugins: [
//自动添加css前缀
require('autoprefixer'),
//转换rem 需 install postcss-plugin-px2rem
require("postcss-plugin-px2rem")({ 'remUnit': 75, 'baseDpr': 2 })
]
};
九、oss.js
module.exports = {
region: 'xxx',
accessKeyId: 'xxxxxx',
accessKeySecret: 'xxxxxxx',
bucket: 'xxx'
}
十、使用
-
pages/home/index.html<!DOCTYPE html> <html lang="en" style="font-size: 100px;"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no, viewport-fit=cover" /> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="apple-mobile-web-app-capable" content="yes"> <title>index</title> </head> <body> <div class="container"> <div class="box">1111</div> <div class="box2">33333</div> <img src="../../static/images/home/1.png" alt=""> </div> </body> </html> -
pages/home/index.scssbody { margin: 0 auto; // max-width: 750px; } .container { .box { width: 187.5px; height: 187.5px; background-color: red; text-align: center; line-height: 187.5px; font-size: 30px; border: 10px solid #000; } .box2 { margin-top: 20px; width: 50%; height: 2rem; background-color: green; text-align: center; line-height: 187px; font-size: 30px; } } -
pages/home/index.jsimport 'reset-css' import '@/common/js/rem.js' import './index.scss' import '@/common/css/common.css' import Home from './home' new Home() -
pages/home/home.jsimport request from '../../common/js/request' function $$(id) { return document.querySelector(id) } const CONFIG = { api: '/promote/annual-festival-list', } /** * jsbrudge js与ios交互 **/ function setupWebViewJavascriptBridge(callback) { if (window.WebViewJavascriptBridge) { callback(WebViewJavascriptBridge) } else { document.addEventListener( 'WebViewJavascriptBridgeReady', function () { callback(WebViewJavascriptBridge) }, false ) } if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback) } window.WVJBCallbacks = [callback] var WVJBIframe = document.createElement('iframe') WVJBIframe.style.display = 'none' WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__' document.documentElement.appendChild(WVJBIframe) setTimeout(function () { document.documentElement.removeChild(WVJBIframe) }, 0) } class Home { constructor() { this.userInfo = null this.isLoading = false this.init() } init() { console.log('页面进入'); console.log('process.env.NODE_ENV', process.env.NODE_ENV); } // 获取数据 getData() { if (this.isLoading) return // 防抖处理 const payLoad = { token: this.userInfo.token, type_id: this.tabSel } try { this.isLoading = true request.post(CONFIG.api, payLoad).then(res => { if (res.code != '0') { this.toast(res.msg) return } this.isLoading = false this.res = res.data const top3 = this.res.list.splice(0, 3) $$('.top3').innerHTML = this.getTop3(top3) const tempArr = this.res.list.splice(0, 7) this.showingList = tempArr $$('.list_container').innerHTML = this.getList(this.showingList) $$('.fourth_content').innerHTML = this.getSelf(this.res.my_info) }).catch(err => { console.log('err----', err); this.isLoading = false }) } catch (error) { } } // 与客户端交互获取用户基本信息(token等) getInfo() { const that = this if (/android/i.test(navigator.userAgent)) { try { that.userInfo = window.android.getInfo() that.userInfo = eval('(' + that.userInfo + ')') that.getData() } catch (e) { console.log(e, 'android报错') } } else if (/ios|iphone|ipod|pad/i.test(navigator.userAgent)) { try { setupWebViewJavascriptBridge(function (bridge) { var data = 'hello' bridge.callHandler('getInfo', data, function (resp) { that.userInfo = resp that.getData() console.log(resp, '获取ios信息') }) }) } catch (e) { console.log(e, 'ios报错') } } } } export default Home -
运行命令
npm run dev，编译完成后在地址栏输入：http://localhost:9088/home.html，即可看到home页面
至此，使用webpack进行多页面配置，完成！！
功能包括：
- 多页面应用开发配置
- 本地、线上开发、生产，环境配置
- 本地环境使用代理
- 线上开发环境配置aliyun，代码自动上传至服务器
- 生产环境代码优化（压缩、哈希等）
- axios二次封装
- js与app端交互（获取token等信息）
- sass预编译
标签：webpack4,const,require,配置,js,webpack,loader,css,页面 来源： https://blog.csdn.net/weixin_44785498/article/details/113995799
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。